google-maps - 如何更改返回的 Google map 方向上虚线的颜色

Question

使用 Google 路线服务，我获得了两个位置之间的交通结果并将结果显示在 map 上。我想更改两个位置之间的线条颜色的颜色。我正在使用 google.maps.Polyline 来更改主线颜色，但有些部分的线是虚线的(以显示您必须步行的位置)，但不会更改为与主线相同的颜色。如何更改虚线颜色？

/* change line color */
var polylineOptionsActual = new google.maps.Polyline({
  strokeColor: '#9f98ff',
  strokeWeight: 5
});

function initialize() {
  /* create map */
  var mapOptions = {
    zoom: 14,
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    disableDefaultUI: true
  }
  map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

  /* directions */
  var rendererOptions = { 
    map: map, 
    suppressMarkers: true,
    polylineOptions: polylineOptionsActual
  } 
  directionsDisplay = new google.maps.DirectionsRenderer(rendererOptions);
  directionsDisplay.setPanel(document.getElementById('directions-results'));
}

function getDirections() {
  /* directions request */
  var request = {
    origin: document.getElementById('from-input').value,
    destination: document.getElementById('to-input').value,
    travelMode: google.maps.TravelMode.TRANSIT
  };

  /* display directions */
  directionsService.route(request, function(response, status) {
    if (status == google.maps.DirectionsStatus.OK) {
      directionsDisplay.setDirections(response);
    }
  });
}

Answer 1

虽然 G 没有记录它，但 google.maps.DirectionsRenderer 确实通过其属性 b.polylines 公开了它的折线，它是 google.maps.Polyline 实例的数组。因此，如果我们搜索它们，我们会发现只有虚线的那些具有“图标”属性，我们可以通过 google.maps.Polyline.setOptions() 更改它在代码的全局范围内包含以下内容:

//iconSequence must be a single instance of google.maps.IconSequence object
google.maps.DirectionsRenderer.prototype.setDottedPolylineOptions = function (iconSequence) {
     //need a reference to the current 'this' object
    var obj = this;
     //in case this DirectionsRenderer's directions were just set an instant ago,
     //need a slight delay before we may access the b.polylines property of this object
    window.setTimeout(function () {
        var i,
            lines = obj.b.polylines,
            len = lines.length;
        for (i = 0; i < len; i++) {
            if (lines[i].icons) {
                lines[i].setOptions(
                    {
                        icons: [iconSequence]
                    }
                );
            }
        }
    },1);
};

然后你可以在你的代码中做:

var iconSequence = {
    icon: {
        fillColor: 'red', //or hexadecimal color such as: '#FF0000'
        fillOpacity: 0.8,
        scale: 3,
        strokeColor: 'blue',
        strokeWeight: 1,
        strokeOpacity: 0.8,
        path: google.maps.SymbolPath.CIRCLE
    },
    repeat: '10px'
};
directionsDisplay.setDottedPolylineOptions(iconSequence);

我应该注意，上面的操作应该在设置 directionsDisplay 的方向之后完成。

这是一个 fiddle :http://jsfiddle.net/Wx9XV/