javascript - trazar - google maps routes
cómo cambiar el color de la ruta en google map api después de la ruta es construir (1)
Encontrarás muchas respuestas que muestran cómo construir una ruta con diferentes colores sobre cómo cambiar el color de la ruta en google maps v3
Quiero saber cómo puedo cambiar el color una vez que ya está construido y renderizado.
Tengo muchas rutas diferentes que se muestran en el mapa, pero quiero mostrar el color rojo o el más oscuro, si este punto de dirección está activo y cambiar otros colores de ruta a gris, hasta que uno de ellos esté activo.
código:
var directionsDisplay;
var directionsService = new google.maps.DirectionsService();
var map;
function initialize() {
directionsDisplay = new google.maps.DirectionsRenderer({
polylineOptions: {
strokeColor: "red"
}
});
var mapOptions = {
zoom:7,
mapTypeId: google.maps.MapTypeId.ROADMAP,
center: {lat: 41.850033, lng: -87.6500523}
}
map = new google.maps.Map(document.getElementById(''map-canvas''), mapOptions);
directionsDisplay.setMap(map);
}
function calcRoute() {
var start = document.getElementById(''start'').value;
var end = document.getElementById(''end'').value;
var request = {
origin:start,
destination:end,
travelMode: google.maps.DirectionsTravelMode.DRIVING
};
directionsService.route(request, function(response, status) {
if (status == google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(response);
}
});
}
google.maps.event.addDomListener(window, ''load'', initialize);
demostración para mostrar cómo no funciona con dos rutas: http://jsfiddle.net/8xq4gd8y/15/
La clase directionsRenderer tiene un método setOptions . Ver la documentación .
directionsDisplay.setOptions({
polylineOptions: {
strokeColor: ''red''
}
});
Para que esto funcione, debe quitarlo del mapa y volver a agregarlo para ver el cambio de color.
Por ejemplo, en un oyente de eventos, harías:
google.maps.event.addListener(map, ''click'', function() {
directionsDisplay.setMap(null);
directionsDisplay.setOptions({
polylineOptions: {
strokeColor: ''blue''
}
});
directionsDisplay.setMap(map);
});