Actualmente esta funcionalidad en las aplicaciones web y móviles se ha popularizado, ejemplos de esto son foursquere, Google Maps, Facebook entre otras.
Con HTML5 obtener la ubicación del usuario es muy fácil pero tenemos que tener en cuenta que no todos los dispositivos cuentan con un GPS que permite una localización más precisa por una triangulación de antenas y satélites, otros solo cuentan con conexión vía ISP y el navegador típicamente tomará esta información por IP o por triangulación de puntos de acceso Wi-Fi.
Para implementar la geo localización debemos asegurarnos de que el navegador soporta la API de geo localización de HTML5.
Para recuperar la localización del usuario haremos uso del objeto navigator.geolocation y la función básica para este caso es getCurrentPosition(), su sintaxis es :
getCurrentPosition(FuncionExito[,FuncionError],opciones);
FuncionExtito le dice al navegador al cual función debería llamar si los datos de localización han sido encontrados como disponibles. La función indicada toma los datos de la localización obtenida y actúa en consecuencia.
FuncionError, este parámetro llama a una función en curso de que la petición de localización falle por alguna razón que escapa de nuestro control. Es opcional pero es una buena práctica.
Opciones, aquí se maneja internamente a su vez tres parámetros opcionales que se encierran entre los símbolos “{ }”.
- enableHighAcurrency: indica al navegador que utilice una fuente de información exacta si está disponible. Los valores posibles son TRUE o FALSE. NOTA : Usted no puede controlar la fuente de información.
- Timeout:Le indica el monto de máximo de tiempo del que dispone para calcular la posición actual. Si el cálculo no se completa en el tiempo indicado, la función de error se dispara. El valor se da en milisegundos.
- maximumAge: Señala que tan vieja puede ser la información de localización antes de volver a recalcularla. El valor también se indica en milisegundos.
Ejemplo
|
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 |
<!DOCTYPE html> <html lang="es"> <head> <meta charset="utf-8"> <title>geo localizacion</title> <script type="text/javascript"> function loadLocation () { //inicializamos la funcion y definimos el tiempo maximo ,las funciones de error y exito. navigator.geolocation.getCurrentPosition(viewMap,ViewError,{timeout:1000}); } //Funcion de exito function viewMap (position) { var lon = position.coords.longitude; //guardamos la longitud var lat = position.coords.latitude; //guardamos la latitud var link = "http://maps.google.com/?ll="+lat+","+lon+"&z=14"; document.getElementById("long").innerHTML = "Longitud: "+lon; document.getElementById("latitud").innerHTML = "Latitud: "+lat; document.getElementById("link").href = link; } function ViewError (error) { alert(error.code); } </script> </head> <body onload="loadLocation();"> <label id="long"></label> <br/> <label id="latitud"></label> <br/> <a id="link" target="_blank">Enlace al mapa</a> </body> </html> |
Hola quisiera guardar los datos que muestras en el label en un text por ejemplo este
document.getElementById(“long”).innerHTML = “Longitud: “+lon;
Saben de alguna manera de poder guardarlo en un text para luego guardarlo en una base de datos?
si estas trabando con asp o aspx utiliza ajax y ligalo a un evento, onclik, onchange o bien puedes ustilizar un setTimeOut para ir recargando el contenido y guardar las coordenas despues de cierto periodo de tiempo.