如何更改返回的Google地图方向上虚线的颜色 [英] How do you change the color of the dotted line on returned Google map directions

问题描述

使用Google路线服务我可以在两个地点之间获得公交结果并在地图上显示结果。我想更改两个位置之间的线条颜色。我正在使用google.maps.Polyline来更改主线颜色，但有一些线条点缀的部分（以显示您必须走路的位置），但不会更改为与主线相同的颜色。我能做些什么来改变虚线颜色？

Using Google directions service I'm getting transit results between two locations and displaying the result on the map. I want to change the color of the line color between the two locations. I'm using google.maps.Polyline to change the main line color but there are sections where the line is dotted (to show where you have to walk) but that doesn't change to the same color that the main line is. What can I do to change the dotted lines color?

/* 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);
    }
  });
}

推荐答案

google.maps.DirectionsRenderer通过它的属性b.polylines公开它的多段线，它是一个google.maps.Polyline实例的数组。因此，如果我们搜索它们，我们发现只有具有虚线的那些具有'图标'属性，我们可以通过google.maps.Polyline.setOptions（）
来修改这些属性，包括以下全局范围您的代码：

Though it's undocumented by G, the google.maps.DirectionsRenderer does expose its polylines via its property b.polylines which is an array of google.maps.Polyline instances. So, if we search through them, we find that only the ones which have dotted lines have an 'icons' property, which we can alter via google.maps.Polyline.setOptions() Include the following in global scope of your code:

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

然后您可以在您的代码中执行：

And then you can within your code do:

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的方向之后完成。

I should note that the above should be done AFTER setting the directionsDisplay's directions.

这是一个小提琴： http://jsfiddle.net/Wx9XV/

这篇关于如何更改返回的Google地图方向上虚线的颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！