2012-01-28 66 views
6

我想在同一地图上显示多条路线,但无法这样做。在谷歌地图上显示多个路线

不管我做什么,我只得到一条路线。

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); 
      } 
     }); 
     } 

任何指针都会有帮助。

回答

0

您是否尝试如下?
这里我捕获了一条路径并显示它。你可以通过编写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 
                }); 
       } 
      } 
     }); 
+0

是做这个result.routes [1] .overview_path;没有给我第二条路线。 – 2012-02-04 19:51:28

+0

@AJ。也许在这种情况下没有第二条路线?你有没有尝试过所有这些与一些不同的坐标系吗?无论如何,你可以在这里展示你的实际代码(包含result.routes [1] .overview_path)供其他人测试吗? – 2012-02-06 03:40:48

+0

谢谢Anisha。是的,有3条路线可用。我会在这里粘贴我的代码片段。 – 2012-02-08 12:46:18

14

我有同样的问题。谷歌地图上的Google地图上的This thread显示了如何执行此操作。

作者(谷歌的员工),写了这个:

您应该能够创建两个的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'); 

我尝试过了,它的工作。