Estilo de Google Maps v3 Polilínea con Guiones o Puntos?

Question

Estilo de Google Maps v3 Polilínea con Guiones o Puntos?

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. No puedo encontrar ninguna manera de hacer esto. Es posible, y si es así, ¿cómo?

23

javascript google-maps api styling polyline

Author: David Pfeffer, 2011-05-23

Source

1 answers

score 58 · Accepted Answer

Esta característica se ha agregado a las opciones de polilínea, y se llama Símbolos en Polilíneas

Crear 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 guion está controlada por path's +/-1, y el espaciado está controlado por repeat. Es un poco prolijo, pero muy flexible.

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