¿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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 |
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false&language=es&libraries=geometry"></script> <script type="text/javascript"> window.onload = function(){ var pos_A = new google.maps.LatLng(41.97837956414176,2.77969550981652); var pos_B = new google.maps.LatLng(41.97952806717199,2.8421802510274574); var options = { zoom: 13, center: new google.maps.LatLng(41.97659296270089,2.811624525929801), mapTypeId: google.maps.MapTypeId.SATELLITE, panControl: false, zoomControl: false, mapTypeControl: false, scaleControl: false, streetViewControl: false, overviewMapControl: false }; var map = new google.maps.Map(document.getElementById('map'), options); var marcadorA = new google.maps.Marker({ position: pos_A, map: map, title: 'marcador A', animation: google.maps.Animation.DROP, draggable: false }); var marcadorB = new google.maps.Marker({ position: pos_B, map: map, title: 'marcador B', animation: google.maps.Animation.DROP, draggable: false }); //array de puntos en nuestra línea var puntos_linea = [ marcadorA.position, marcadorB.position ]; //definimos la línea var linea = new google.maps.Polyline({ path: puntos_linea, geodesic: true, strokeColor: '#FF0000', strokeOpacity: 1.0, strokeWeight: 2 }); //dibujamos la línea sobre el mapa linea.setMap(map); }; </script> |
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.
|
1 2 3 4 |
var puntos_linea = [ marcadorA.position, marcadorB.position ]; |
Aquí definimos las propiedades de nuestra línea:
|
1 2 3 4 5 6 7 |
var linea = new google.maps.Polyline({ path: puntos_linea, geodesic: true, strokeColor: '#FF0000', strokeOpacity: 1.0, strokeWeight: 2 }); |
- 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.
|
1 |
linea.setMap(map); |
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.
|
1 2 3 4 5 6 7 8 9 10 |
//ponemos evento en marcador A (borrar linea) google.maps.event.addListener(marcadorA, 'click', function() { linea.setMap(null); }); //ponemos evento en marcador B google.maps.event.addListener(marcadorB, 'click', function() { linea.setMap(map); }); |
*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.
¿Y esto que pinta con las líneas? Vemos un ejemplo y os lo cuento…
En el código he quitado los marcadores para simplificar.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 |
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false&language=es&libraries=geometry"></script> <script type="text/javascript"> window.onload = function(){ var pos_A = new google.maps.LatLng(41.97837956414176,2.77969550981652); var pos_B = new google.maps.LatLng(41.97952806717199,2.8421802510274574); var options = { zoom: 13, center: new google.maps.LatLng(41.97659296270089,2.811624525929801), mapTypeId: google.maps.MapTypeId.SATELLITE, panControl: false, zoomControl: false, mapTypeControl: false, scaleControl: false, streetViewControl: false, overviewMapControl: false }; var map = new google.maps.Map(document.getElementById('map'), options); //array de puntos en nuestra línea var puntos_linea = [ pos_A, pos_B ]; var simbolo_linea = { path: google.maps.SymbolPath.FORWARD_CLOSED_ARROW }; //definimos la línea var linea = new google.maps.Polyline({ path: puntos_linea, geodesic: true, strokeColor: '#FF0000', strokeOpacity: 1.0, strokeWeight: 5, icons: [{ icon: simbolo_linea, offset: '100{1f0778fe2e852b61c79949ce7b4bb677680b76fea251b03768a071033ace27eb}' }] }); //dibujamos la línea sobre el mapa linea.setMap(map); }; |
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:
|
1 2 3 4 5 |
icons: [{ icon: simbolo_linea, offset: '0', repeat: '25px' }] |
La repetición también se puede poner porcentual repeat: ‘12{1f0778fe2e852b61c79949ce7b4bb677680b76fea251b03768a071033ace27eb}’
Más propiedades:
|
1 2 3 4 5 6 7 8 9 |
var simbolo_linea = { path: google.maps.SymbolPath.FORWARD_OPEN_ARROW, fillColor: 'red', fillOpacity: 0.8, scale: 10, strokeColor: 'white', strokeWeight: 2, strokeOpacity:1.0 }; |
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.
|
1 2 3 4 5 |
var simbolo_linea = { path: 'M 0,-1 0,1', strokeOpacity: 1, scale: 4 }; |
Si hay algo que no quede suficientemente claro o tenéis otra manera de hacerlo… ¡comentad! 😉
