绘制多个路线谷歌地图

Question

我想根据谷歌的路线服务绘制多条路线,代码如下

p/s:数据是我从json调用中获得的列表

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

我似乎无法从论坛中找到太多相关信息,我最好的办法是获取所有个人交通信息并使用折线再次绘制？而且,如何确保循环仅在我的directionDisplay.setDirections完成时继续？

问候,安迪

Answer 1

每个路线都需要单独的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,所以你的阵列行走方法可能会有所不同.