Как изменить цвет пунктирной линии на возвращенных направлениях карты Google

Question

С помощью службы маршрутов Google я получаю результаты транзита между двумя точками и показываю результат на карте. Я хочу изменить цвет линии между двумя точками. Я использую 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. Поэтому, если мы будем искать их, мы обнаружим, что только те, у которых есть пунктирные линии, имеют свойство 'icons', которое мы можем изменить с помощью 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);

Должен отметить, что выше следует сделать ПОСЛЕ установки направлений.

Вот скрипка: http://jsfiddle.net/Wx9XV/