¿Tenemos un montón de puntos en nuestro mapa y no sabemos que ruta dibujan? La solución son las líneas ;).

Primero de todo, empezaremos por explicar como dibujar una línea simple entre 2 marcadores.

línea entre 2 puntos

Bueno, esto es como los demás ejemplos, definimos las dos posiciones, definimos el mapa, creamos el mapa, creamos los dos marcadores (con las posiciones definidas) y empezamos con la línea.
puntos_linea es un array donde tendremos las posiciones (LatLon) de los puntos que formen la línea, tal como se puede ver en el ejemplo.

Aquí definimos las propiedades de nuestra línea:

  • path: array con los puntos que compondrán nuestra línea.
  • geodesic: cuando está a ‘true’ interpreta la curvatura de la Tierra, en ‘false’ es simplemente una línea recta.
  • strokeColor: color de la línea #RGB.
  • strokeOpacity: opacidad de la línea de 0.0 (completamente transparente) a 1.0 (completamente opaca).
  • strokeWeight: ancho de la línea en píxeles.

Hay alguna propiedad más de línea que ya iremos viendo.

Y finalmente, para mostrarla la pasamos a nuestro mapa.

Si quisiéramos borrar la línea, lo podemos hacer como con los marcadores, linea.setMap(null) y borramos el array de puntos.

En el código anterior, podríamos poner los eventos click en los marcadores: el A que borrara la línea del mapa (sin borrar el array), y el B que la volviera a dibujar.

Descarga

*Las líneas también pueden contener eventos, pueden ser clicables y dragables.

Al crear las líneas, vemos que la definimos como Polyline, esto es porqué podemos poner más de dos puntos, pero esto lo veremos en el próximo post.

Sigamos con más cosas chulas sobre las líneas, los símbolos. Digamos que esto también se puede aplicar a los marcadores, pero vamos a ver los símbolos y cómo meterlos en nuestra línea.

¿Qué son los símbolos? Pues son figuras ya preestablecidas. Os pongo el nombre y la figura sacados de la página de google.

SymbolPath

¿Y esto que pinta con las líneas? Vemos un ejemplo y os lo cuento…

9_4

En el código he quitado los marcadores para simplificar.

Lo que hemos hecho es definir símbolo_linea, con el path al objeto de línea que queramos usar; y en la definición de la línea hemos añadido icons definiendo el icono como el símbolo a usar y offset, que es el punto de la línea queremos que aparezca (al final 100{1f0778fe2e852b61c79949ce7b4bb677680b76fea251b03768a071033ace27eb}).
Aquí decir que se puede definir el offset en píxeles (offset: ‘100px’). Si lo hacemos así, al hacer zoom se reajusta.

En icons podemos poner otra propiedad interesante, repeat, que es la repetición del símbolo en la línea, veamos un ejemplo con:

La repetición también se puede poner porcentual repeat: ‘12{1f0778fe2e852b61c79949ce7b4bb677680b76fea251b03768a071033ace27eb}’

línea con SymbolPath repeat

Más propiedades:

9_6

En esta última también hemos cambiado la opacidad de la línea a 0.2.
Antes de dar por terminado este post, decir que se puede hacer una línea discontinua usando SVG para definir el path.

9_0
Si hay algo que no quede suficientemente claro o tenéis otra manera de hacerlo… ¡comentad! 😉

Si te gusta, compártelo :)<br>Share on Facebook
Facebook
0Tweet about this on Twitter
Twitter
Share on Google+
Google+
0Share on LinkedIn
Linkedin
Pin on Pinterest
Pinterest
0Email this to someone
email