¿Te gustaría aprender Diseño Web?
Tenemos los cursos que necesitas.¡Haz clic aquí!

 

Una de las principales novedades de HTML5 fue la aparición de nuevas APIs de Javascript que aumentan la potencia de este lenguaje.

Una de ellas es la nueva API de geolocalización, que nos permite conocer la ubicación geográfica del usuario, siempre y cuando esté usando un navegador que la tenga implementada y que el usuario dé su permiso.

Aunque la primera impresión sea que sólo será útil para usuarios de navegadores móviles, la realidad es que éste utiliza otros medios además del GPS para calcular la ubicación del usuario, como por ejemplo a través de su dirección IP.

NAVEGADORES QUE SOPORTAN EL API DE GEOLOCALIZACIÓN

Antes de nada debemos saber qué navegadores soportan esta funcionalidad. En la siguiente tabla podemos verlo:

Navegador Versión
Opera 10.6+
Internet Explorer 9+
Safari 5+
Chrome 5+
Firefox 3.5+
iPhone 3+
Android 2+

 

Antes de empezar a usar el API de geolocalización tendremos que comprobar que el navegador la soporta:

if (navigator.geolocation)
{
	// Código de la aplicación
}
else
{
	// No hay soporte para la geolocalización: podemos desistir o utilizar algún método 
alternativo

LA FUNCIÓN NAVIGATOR.GEOLOCATION.GETCURRENTPOSITION

La ubicación del usuario se obtiene a través de la siguiente función:

navigator.geolocation.getCurrentPosition(funcExito, funcError, opciones);

Esta función tiene tres parámetros (los dos últimos opcionales):

  1. funcExito: función de retorno que se ejecutará si se obtiene la posición. Se le pasará como parámetro un objeto Position.
  2. funcError: función de retorno que se ejecutará si no se obtiene la posición. Se le pasará como parámetro un objeto PositionError.
  3. opciones: un objeto PositionOptions con parámetros para la obtención de la localización.

La función intentará obtener la posición del usuario. Si lo consigue llamará a la función que le pasemos como primer parámetro pasándole un objeto Position con esos datos. Si, por el contrario, no lo consigue, llamará a la función que le pasemos como segundo parámetro pasándole un objeto PositionError que indicará la razón por la que no lo ha conseguido.

EL OBJETO POSITION

Es el objeto que nos indicará la ubicación del usuario si el navegador puede determinarla. Este objeto consta de los siguientes atributos:

Atributo Tipo de dato Descripción
coords.latitude double Latitud en grados decimales
coords.longitude double Longitud en grados decimales
coords.accuracy double Precisión en metros
timestamp DOMTimeStamp Momento de la toma de estos datos
coords.altitude double o null Altitud en metros
coords.altitudeAccuracy double o null Precisión de la altitud en metros
coords.heading double o null Orientación en grados decimales en el sentido de las agujas del reloj
coords.speed double o null Velocidad en metros/segundo

 

De todos los atributos sólo coords.latitudecoords.longitude y coords.accuracy es seguro que tendrán valor. Los otros dependen de las aptitudes del dispositivo que esté usando el usuario.

EL OBJETO POSITIONERROR

Es el objeto que nos indicará la causa por la que no se ha podido determinar la ubicación del usuario. Este objeto consta de dos atributos: code y message. De estos el que nos interesa es code que será el que nos indique el error de forma más eficiente (message hace lo mismo pero con una cadena explicativa del error).

Los posibles valores del atributo code son:

Valor Valor numérico Descripción
PERMISSION_DENIED 1 El usuario ha denegado el acceso a la obtención de su ubicación
POSITION_UNAVAILABLE 2 No se ha podido obtener la ubicación del usuario por alguna razón
TIMEOUT 3 Se ha agotado el tiempo de espera para obtener la ubicación

EL OBJETO POSITIONOPTIONS

Es el objeto que nos permitirá poner algunas condiciones a la obtención de la ubicación del usuario. Este objeto consta de los siguientes atributos:

Atributo Tipo de dato Valor por defecto Descripción
enableHighAccuracy boolean false Si el dispositivo y el usuario lo permiten el navegador intentará obtener la ubicación del usuario con una mayor precisión. Esto suele suponer un mayor coste de recursos.
timeout long No tiene Tiempo de espera máximo para obtener la posición en milisegundos. Este tiempo empieza a contar desde que el usuario da su permiso, no antes.
maximumAge long 0 Antigüedad máxima en milisegundos. Con el valor por defecto (0), cada vez que se pide la posición se vuelve a calcular. Si ponemos algún valor mayor que cero, se busca en la caché y si hay una posición tomada anteriormente no más antigua que el valor dado, se devuelve inmediatamente, ahorrando muchos recursos. Con el valor Infinity siempre se devolverá un valor de la caché.

 

 

Hay que tener en cuenta que algunos dispositivos tienen distintos métodos para obtener la posición si enableHighAccuracy está activado y si está desactivado, con lo es posible que una llamada a getCurrentPosition con esta opción activada dé error mientras que puede tener exito con ella desactivada.

OBTENER LA POSICIÓN DEL USUARIO

Veamos ahora el código para obtener la posición del usuario con: comprobación de si el navegador soporta geolocalización, recogida de los datos de latitud y longitud, control de errores y pasándole las opciones de tiempo máximo de espera y antigüedad.

(function(){ var content = document.getElementById("geolocation-test"); if (navigator.geolocation) { navigator.geolocation.getCurrentPosition(function(objPosition) { var lon = objPosition.coords.longitude; var lat = objPosition.coords.latitude; content.innerHTML = "<p><strong>Latitud:</strong> " + lat + "</p><p> <strong>Longitud:</strong> " + lon + "</p>"; }, function(objPositionError) { switch (objPositionError.code) { case objPositionError.PERMISSION_DENIED: content.innerHTML = "No se ha permitido el acceso a la posición del usuario."; break; case objPositionError.POSITION_UNAVAILABLE: content.innerHTML = "No se ha podido acceder a la información de su posición."; break; case objPositionError.TIMEOUT: content.innerHTML = "El servicio ha tardado demasiado tiempo en responder."; break; default: content.innerHTML = "Error desconocido."; } }, { maximumAge: 75000, timeout: 15000 }); } else { content.innerHTML = "Su navegador no soporta la API de geolocalización."; } })();

Y en el siguiente cuadro podemos ver el resultado de este script aplicado en esta página:


No se ha permitido el acceso a la posición del usuario.

OBTENER LA POSICIÓN DEL USUARIO CADA VEZ QUE ÉSTA CAMBIE

Si en lugar de querer obtener la ubicación del usuario puntualmente queremos recibir información actualizada cada vez que esta cambie, en lugar de usar la función navigator.geolocation.getCurrentPosition, usaremos navigator.geolocation.watchPosition. Los parámetros a pasar a esta función son exactamente los mismos que para la anterior, con la salvedad de que si bien la anterior no devuelve ningún valor, esta devolverá un identificador con el que podemos parar las actualizaciones de ubicación. Podemos, por ejemplo, hacer que el usuario pare manualmente las actualizaciones desde un botón. Se haría de la siguiente forma:

var watch_id = navigator.geolocation.watchPosition(function(objPosition)
{
	// Procesar posición
}, function(objPositionError)
{
	// Procesar errores
}, {
	maximumAge: 75000,
	timeout: 15000
});

document.getElementById("stop-button").onclick = function()
{
	navigator.geolocation.clearWatch(watch_id);
};

Te esperamos en los siguientes artículos en donde hablaremos mas acerca de estos temas, los cuales hoy en día son de vital importancia en el mundo de la tecnología.

¿Te gustaría aprender Diseño Web?
Tenemos los cursos que necesitas.¡Haz clic aquí!
About Author

NGuerrero

0 0 votos
Article Rating
Suscribir
Notificar de
0 Comments
Comentarios.
Ver todos los comentarios
0
¿Te gusta este articulo? por favor comentax
()
x
Abrir chat
¿Quieres aprender a programar?
Hola 👋,
¿Te interesa información de nuestros cursos?