Created
November 18, 2016 18:53
-
-
Save Jamp/2859201e1bed8a0140e77d1cfdad67b0 to your computer and use it in GitHub Desktop.
Solución al ejercicio de geolocalización
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset="utf-8"> | |
| <title>Geolocalización</title> | |
| <script type="text/javascript" src="zepto.min.js"></script> | |
| <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script> | |
| <script type="text/javascript" src="gmaps.js"></script> | |
| <link rel="stylesheet" type="text/css" href="mapa.css" /> | |
| <script type="text/javascript"> | |
| var map, lat, lng; | |
| // Variables para almacenar el primer marcador | |
| var plat, plng; | |
| $(function(){ | |
| function enlazarMarcador(e){ | |
| map.drawRoute({ | |
| origin: [lat, lng], | |
| destination: [e.latLng.lat(), e.latLng.lng()], | |
| travelMode: 'driving', | |
| strokeColor: '#000000', | |
| strokeOpacity: 0.6, | |
| strokeWeight: 5 | |
| }); | |
| lat = e.latLng.lat(); | |
| lng = e.latLng.lng(); | |
| map.addMarker({ lat: lat, lng: lng}); | |
| }; | |
| function geolocalizar(){ | |
| GMaps.geolocate({ | |
| success: function(position){ | |
| lat = position.coords.latitude; | |
| lng = position.coords.longitude; | |
| map = new GMaps({ | |
| el: '#map', | |
| lat: lat, | |
| lng: lng, | |
| click: enlazarMarcador, | |
| tap: enlazarMarcador | |
| }); | |
| map.addMarker({ lat: lat, lng: lng}); | |
| // Guardar primer marcador | |
| plat = lat; | |
| plng = lng; | |
| }, | |
| error: function(error) { alert('Geolocalización falla: '+error.message); }, | |
| not_supported: function(){ alert("Su navegador no soporta geolocalización"); }, | |
| }); | |
| }; | |
| geolocalizar(); | |
| // Compactador de ruta | |
| function compactarRuta() { | |
| // Borramos todo | |
| map.removeMarkers(); | |
| map.cleanRoute(); | |
| // Hacemos ruta compactada | |
| map.drawRoute({ | |
| origin: [plat, plng], | |
| destination: [lat, lng], | |
| travelMode: 'driving', | |
| strokeColor: '#000000', | |
| strokeOpacity: 0.6, | |
| strokeWeight: 5 | |
| }); | |
| // Volvemos a mostrar el primero o el último marcador | |
| map.addMarker({ lat: plat, lng: plng}); | |
| map.addMarker({ lat: lat, lng: lng}); | |
| } | |
| // Le creamos el listener a botón | |
| $('#compactar').on('click', compactarRuta); | |
| }); | |
| </script> | |
| </head> | |
| <body> | |
| <h1> | |
| Geolocalización | |
| <button id="compactar">Compactar Ruta</button><br> | |
| </h1> | |
| <div id="map"></div> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment