如何在谷歌地图中的方向显示多条折线？

Question

我想在谷歌地图上绘制多条折线，用于多条路线。 为此我使用google.maps.DirectionsService

function drawPolyline(source,destination,waypoints){
        // show route between the points
        directionsService = new google.maps.DirectionsService();
        directionsDisplay = new google.maps.DirectionsRenderer(
        {
            suppressMarkers: true,
            suppressInfoWindows: true
        });
        directionsDisplay.setMap(map);
        var request = {
            origin:source, 
            destination:destination,
            waypoints:waypoints,
            travelMode: google.maps.DirectionsTravelMode.DRIVING
        };
        directionsService.route(request, function(response, status) 
        {
            if (status == google.maps.DirectionsStatus.OK) 
            {
                directionsDisplay.setDirections(response);

            }
        });

      }

但是当我多次调用此方法时，只会出现最后一条折线。 我希望不同的折线有不同的颜色。

Answer 1

您需要为每个使用折线而不是方向渲染器。

var line = new google.maps.Polyline({clickable:true,map:map,path:"some lat,lngs"});

请看这里的api： http://code.google.com/apis/maps/documentation/javascript/reference.html#Polyline 选项列在这里： http://code.google.com/apis/maps/documentation/javascript/reference.html#PolylineOptions

DirectionsRenderer对于绘制线条不是很灵活，它只是简单方向功能的帮手。

Answer 2

路线让您检查路线： http://code.google.com/apis/maps/documentation/javascript/directions.html#InspectingResults

DirectionsResult对象具有路径[]的数组，它允许您获取构成路线的一组编码折线：

if (status == google.maps.DirectionsStatus.OK) 
            {
                directionsDisplay.setDirections(response);
                myRoutes[]=response.routes[];

            }

您可以使用routes []数组构建Polyline叠加层，如Scottux所述。

Answer 3

您实际上可以实例化多个DirectionsRenderer并将它们全部设置为同一地图，并且它们都将在同一地图上呈现