javascript - example - ¿Estilizando una Google Polyline v3 con guiones o puntos?

polyline google maps javascript

Question

Me gustaría tomar un mapa basado en Google Map v3 con algunas polilíneas personalizadas, y hacer algunas de esas líneas punteadas o discontinuas. Parece que no puedo encontrar ninguna manera de hacer esto. ¿Es posible, y si es así, cómo?

Answer 1

Esta función se ha agregado a las opciones de Polilínea y se llama Símbolos en polilíneas.

La creación de una línea discontinua se ve así ( demo ):

var lineCoordinates = [
new google.maps.LatLng(22.291, 153.027),
new google.maps.LatLng(18.291, 153.027)
];
var lineSymbol = {
path: ''M 0,-1 0,1'',
strokeOpacity: 1,
scale: 4
};
var line = new google.maps.Polyline({
path: lineCoordinates,
strokeOpacity: 0,
icons: [{
icon: lineSymbol,
offset: ''0'',
repeat: ''20px''
}],
map: map
});

La longitud del guión se controla mediante la path +/- 1, y el espaciado se controla mediante la repeat . Es un poco detallado, pero muy flexible.

Además de los guiones, la nueva función incluye rutas predefinidas para un círculo, puntas de flecha y los documentos incluso incluyen una demostración de animación :)