javascript - DirectionsRenderer によって生成された Google Maps API v3 の個々の脚のポリラインの色を変更する

Question

地図に表示される DirectionsResult があります。DirectionsRenderer によって生成されたマーカーをユーザーがダブルクリックしたときに、個々のポリライン (脚) にアクセスして色を変更するにはどうすればよいですか。

Answer 1

現時点では、特定の脚の色を変更する方法はありませんが、非効率的な方法があります。

これが私が試したものです、

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

Answer 2

特定の区間に異なる色を使用することはできません。ルートは 1 つのポリラインです。

独自にルートを描画し、脚ごとに別々のポリラインを描画する必要があります。その後、脚に異なる色を適用できます。