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 :)