javascript - 更改 DirectionsRenderer 生成的 Google Maps API v3 中各个腿的折线颜色

Question

我有一个显示在地图上的 DirectionsResult。当用户双击 DirectionsRenderer 生成的标记时，如何访问单个折线（腿）并更改颜色。

Answer 1

您不能为特定的腿使用不同的颜色，路线是一条折线。

您必须自己绘制路线，为每条腿单独绘制多段线，然后您可以为腿应用不同的颜色。

Answer 2

现在没有办法改变特定腿的颜色，但有一种效率不高的方法。

这是我尝试过的，

function handleResponse(result, status){
    console.log(result);
    var modifiedResult;
    var displayDirection;
    var line;
    var countTotalRoutes = 0;

    var pinkLine = {
        strokeColor: '#ff0089',
        strokeOpacity: 0.5,
        strokeWeight: 5
    };

    var blackLine = {
        strokeColor: '#333',
        strokeOpacity: 0.6,
        strokeWeight: 5
    };

    var whiteLine = {
        strokeColor: '#3367d6',
        strokeOpacity: 0.6,
        strokeWeight: 5
    };

    var lineColor = [pinkLine, blackLine, whiteLine];

    if (status == google.maps.DirectionsStatus.OK) {
        for(var i = 0; i < result.routes[0].legs.length; i++){
            modifiedResult = $.extend(true, {}, result);
            modifiedResult.request = result.request;
            modifiedResult.geocoded_waypoints = [];
            modifiedResult.geocoded_waypoints.push(result.geocoded_waypoints[i]);
            modifiedResult.geocoded_waypoints.push(result.geocoded_waypoints[i+1]);
            modifiedResult.routes[0].legs = [result.routes[0].legs[i]];
            line = lineColor[countTotalRoutes % 3];

            displayDirection = new google.maps.DirectionsRenderer({polylineOptions : line, suppressMarkers : true, preserveViewport : true});

            displayDirection.setMap(map);
            displayDirection.setDirections(modifiedResult);
            countTotalRoutes += 1;

            modifiedResult = null;
        }
    }
}