在谷歌地图上显示多条路线答案

【问题标题】：Displaying multiple routes on a google map在谷歌地图上显示多条路线
【发布时间】：2012-01-28 05:25:35
【问题描述】：

我正在尝试在同一张地图上显示多条路线，但我无法这样做。

无论我做什么，我都只能得到一条路线。

function calcRoute() {
        var start = document.getElementById('start').value;
        var end = document.getElementById('end').value;
        var request = {
          origin: start,
          destination: end,
          travelMode: google.maps.DirectionsTravelMode.DRIVING
        };
        directionsService.route(request, function(response, status) {
          if (status == google.maps.DirectionsStatus.OK) {
            directionsDisplay.setDirections(response);
          }
        });
      }

任何指针都会有所帮助。

【问题讨论】：

标签： google-maps

【解决方案1】：

我遇到了同样的问题。 This thread 在 Google 地图的 Google 群组上展示了如何做到这一点。

作者（一名 Google 员工）写道：

您应该能够创建两个 DirectionsRenderer 对象，每个对象使用相同的地图和不同的 DirectionsResults。

var map = new google.maps.Map(document.getElementById("map_canvas"));
function renderDirections(result) {
  var directionsRenderer = new google.maps.DirectionsRenderer;
  directionsRenderer.setMap(map);
  directionsRenderer.setDirections(result);
}

var directionsService = new google.maps.DirectionsService;
function requestDirections(start, end) {
  directionsService.route({
    origin: start,
    destination: end,
    travelMode: google.maps.DirectionsTravelMode.DRIVING
  }, function(result) {
    renderDirections(result);
  });
}
requestDirections('Huntsville, AL', 'Boston, MA');
requestDirections('Bakersfield, CA', 'Vancouver, BC');

我试过了，它确实有效。

【讨论】：

【解决方案2】：

您是否尝试过以下操作？
在这里，我捕获了一条路径并显示了它。您可以通过在旁边写上pointsArray = result.routes[1].overview_path; 并在新循环中显示它来做同样的事情。

directionsService.route (request, function (result, status) 
        {
            if (status == google.maps.DirectionsStatus.OK)
            {
                directionsDisplay.setDirections (result);
                pointsArray = result.routes[0].overview_path;

                var i = 0;
                var j = 0;

                for (j = 0; j < pointsArray.length; j++)
                {
                    var point1 = new google.maps.Marker ({
                                                    position:pointsArray [j],
                                                    draggable:false,
                                                    map:map,
                                                    flat:true
                                                    });
                }
            }
        });

【讨论】：

是的，这样做 result.routes[1].overview_path;没有给我第二条路线。
@AJ。在这种情况下，也许没有第二条路线？您是否也尝试过使用一些不同的坐标集？无论如何，你能在这里展示你的实际代码（包含 result.routes[1].overview_path）供其他人测试吗？
谢谢阿尼莎。是的，有 3 条路线可供选择。我将在这里粘贴我的代码 sn-p。