绘制多条路线Google Map

问题描述

我想根据Google中的directions服务绘制多条路线，代码位于

p / s下：Data是我从我的json获得的列表对于（i = 0; i route = data [i];对于（i = 0; i

  
 
 start = new google.maps.LatLng（route.from_lat，route.from_lng）; 
 end = new google.maps.LatLng（route.to_lat，route.to_lng）; 
 
 var request = {
 origin：start，
 destination：end，
 travelMode：google.maps.TravelMode.DRIVING 
}; 
 
 var rendererOptions = {
 preserveViewport：true，
 suppressMarkers：true，
 routeIndex：i 
}; 
 
 
 directionsDisplay = new google.maps.DirectionsRenderer（rendererOptions）; 
 directionsDisplay.setMap（map）; 
 
 var directionsService = new google.maps.DirectionsService（）; 
 directionsService.route（request，function（result，status）{
 console.log（result）; 
 
 if（status == google.maps.DirectionsStatus.OK）{ 
 directionsDisplay.setDirections（result）; 
}}）; 
  

我似乎无法从论坛中找到很多相关信息，是我最好的选择，个人交通信息，并再次使用多段线绘制？另外，如何确保循环仅在我的directionDisplay.setDirections完成时继续进行？

问候，
Andy

解决方案

您需要为每个路线单独使用google.maps.DirectionsRenderer对象。就像那样：

  var routes = [{origin：...，destination：...}，{origin：。 ..，destination：...}，{origin：...，destination：...}]; 
 var rendererOptions = {
 preserveViewport：true，
 suppressMarkers：true，
 routeIndex：i 
}; 
 var directionsService = new google.maps.DirectionsService（）; 
 
 routes.each（function（route）{
 var request = {
 origin：route.origin，
 destination：route.destination，
 travelMode ：google.maps.TravelMode.DRIVING 
}; 
 
 var directionsDisplay = new google.maps.DirectionsRenderer（rendererOptions）; 
 directionsDisplay.setMap（map）; 
 
 directionsService.route（request，function（result，status）{
 console.log（result）; 
 
 if（status == google.maps.DirectionsStatus.OK）{ 
 directionsDisplay.setDirections（result）; 
} 
}）; 
}）; 
  

我使用的是prototype.js，所以您的数组行走方法可能会有所不同。

I would like to draw multiple routes based on the directions service in Google, the code goes below

p/s:Data is a list I obtained from my json call

for (i = 0; i < 20; i++) {
route = data[i];

start = new google.maps.LatLng(route.from_lat,route.from_lng);
end = new google.maps.LatLng(route.to_lat,route.to_lng);

var request = {
origin:start,
destination:end,
travelMode: google.maps.TravelMode.DRIVING
};

var rendererOptions = {
preserveViewport: true,
suppressMarkers:true,
routeIndex:i
};


directionsDisplay = new google.maps.DirectionsRenderer(rendererOptions);
directionsDisplay.setMap(map);

var directionsService = new google.maps.DirectionsService();
directionsService.route(request, function(result, status) {
    console.log(result);

if (status == google.maps.DirectionsStatus.OK) {
    directionsDisplay.setDirections(result);
}});

I can't seems to find much relevant information from forums, is my best bet to obtain all the individual traffic information and draw again using polyline? And also, how do I make sure the loop carries on only when my directionDisplay.setDirections is done?

Regards,Andy

解决方案

You need separate google.maps.DirectionsRenderer object for each route. Something like that:

var routes = [{origin: ..., destination: ...}, {origin: ..., destination: ...}, {origin: ..., destination: ...}];
var rendererOptions = {
    preserveViewport: true,
    suppressMarkers:true,
    routeIndex:i
};
var directionsService = new google.maps.DirectionsService();

routes.each(function(route){
    var request = {
        origin: route.origin,
        destination: route.destination,
        travelMode: google.maps.TravelMode.DRIVING
    };

    var directionsDisplay = new google.maps.DirectionsRenderer(rendererOptions);
    directionsDisplay.setMap(map);

    directionsService.route(request, function(result, status) {
        console.log(result);

        if (status == google.maps.DirectionsStatus.OK) {
            directionsDisplay.setDirections(result);
        }
    });
});

I'm using prototype.js, so your method of array walking may differ.

这篇关于绘制多条路线Google Map的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！