Question

我已经整合了地图，我想显示两个地点之间的路线方向。一切正常，方向显示完美，但是我想改变Polyline方向的颜色，我试过这个代码就像文档说的那样：

//polyline options
    var pOptions = {
            map: map,
            strokeColor: "#2249a3",
            strokeOpacity: 0.9 ,
            strokeWeight: 12,
            z-index: 99
    };
    logJava(polylineOptions);

    //directionsRenderer options
    var mDirectionsRendererOptions = {
            map: map,
            suppressMarkers: true,
            suppressInfoWindows: true,
            polylineOptions: pOptions
    };

    logJava(mDirectionsRendererOptions);

    directionsDisplay = new google.maps.DirectionsRenderer(mDirectionsRendererOptions);

但是当我添加此代码时，它会停止地图，并且它不会显示任何内容，当我发表评论时，一切正常。

此代码有什么问题，以及如何使用 google maps javascript api v3 更改折线的颜色？

提前致谢，

Answer 1

在全球声明中

var polylineOptionsActual = new google.maps.Polyline({
    strokeColor: '#FF0000',
    strokeOpacity: 1.0,
    strokeWeight: 10
    });

初始化

function initialize() {
   directionsDisplay = new google.maps.DirectionsRenderer({polylineOptions: polylineOptionsActual});

Answer 2

在标记为已解决的答案中，我看到Polyline用于polylineOptions的对象。在我的情况下，我使用下一个代码

new google.maps.DirectionsRenderer({ suppressMarkers: true, polylineOptions: { strokeColor: '#5cb85c' } });

不同之处在于我分配了折线选项，而不是折线对象。不确定它可能有用，但决定添加这些答案。

Answer 3

@Seacat，在使用新的polylineOptions更新directionsRenderer后，您必须重新渲染存储在渲染器对象中的指示响应。

directionsRenderer.setDirections(directionsRenderer.directions);

Answer 4

使用setOptions(options:DirectionsRendererOptions)使代码更具可读性。编码将是：

在全球范围内：

var directionsDisplay;

内部initialize()方法：

var polyline = new google.maps.Polyline({
    strokeColor: '#C00',
    strokeOpacity: 0.7,
    strokeWeight: 5
    });
directionsDisplay = new google.maps.DirectionsRenderer();
directionsDisplay.setOptions({polylineOptions: polyline}); 
now directionDisplay can be used in any method with the custom poly line.

在DirectionsRenderer中更改折线的颜色

4 个答案: