Geolocalización HTML5
La API de Geolocalización del HTML es usada para localizar la posición del usuario.
Localizar la posición del usuario
La API de Geolocalización del HTML es usada para obtener la posición geográfica de un usuario. Dado que esto puede comprometer la privacidad, la posición no esta disponible a menos que el usuario lo apruebe.
Nota: La Geolocalización es más precisa en los dispositivos con GPS, como los smartphone.
Nota: En algunos navegadores web solo funcionará la API de Geolocalización en contextos seguros como HTTPS. En contexto no seguros como HTTP las solicitudes pueden ser ignoradas y/no funcionar.
Usando la Geolocalización HTML
El método getCurrentPosition()
es usado para retornar la posición del usuario.
En el siguiente ejemplo retorna la posición en latitud y longitud del usuario:
<script>
var x = getElementById("demo");
function getLocation(){
if( navigator.geolocation ){
navigator.geolocation.getCurrentPosition(showPosition);
}else{
x.innerHTML = "La Geolocalización no es soportada por este navegador.";
}
}
function showPosition(position){
x.innerHTML = "Latitud: " + position.coords.latitude +
"<br>Longitud: " + position.coords.longitude;
}
</script>
Explicación del ejemplo:
- La función getLocation() primero checa si la Geolocalización es soportada, si es así, llama a la función getCurrentPosition(), si no, muestra un mensaje al usuario en elemento "demo".
- La función getCurrentPosition retorna un objeto de coordenadas a la función especificada en el parámetro (showPosition).
- La función showPosition() muestra el mensaje con la Latitud y Longitud.
Este ejemplo es script muy básico de Geolocalización, que carece de manejadores de error.
Manejando errores y rechazos
El segundo parámetro de la función getCurrentPosition(showPosition,showError)
es usado para manejar errores. Esto especifica una función para correr si falla la obtención de la localización del usuario:
function showError(error){
switch(error.code){
case error.PERMISSION_DENIED:
x.innerHTML = "Usuario denego la solicitud de Localización"
break;
case: error.POSITION_UNAVAILABLE:
x.innerHTML = "La localización esta disponible"
break;
case error.TIMEOUT:
x.innerHTML = "Error desconocido"
break;
}
}
Visualizar el resultado en un mapa
Para visualizar el resultado en un mapa, es necesario a un servicio de mapas, como Google Maps.
En el siguiente ejemplo, la latitud y longitud retornadas es usado para mostrar la localización en Google Map, usando una imagen estática:
function showPosition(){
var latlon = position.coords.latitude + "," + position.coords.longitude;
var img_url = "https://maps.googleapis.com/maps/api/"staticmap?center="
+ latlon + "&zoom=14&size=400x300&sensor=false&key=YOUR_:KEY";
document.getElementById("mapholder").innerHTML = "<img src=" + img_url + ">";
}
Información específica de la ubicación
La Geolocalización es también muy útil para la información especifica como:
- Información local actualizada.
- Mostrar puntos de interés cerca del usuario.
- Navegación paso a paso con GPS.
La función getCurrentPosition() retorna datos
La función getCurrentPosition()
retorna un objeto en caso de éxito. Las propiedades latitud, longitud y precisión siempre son retornadas. Las otras propiedades son retornadas solo si están disponibles:
Propiedad | Retorna |
---|---|
coords.latitude |
La latitud como un número decimal (siempre retornado). |
coords.longitude |
La longitud como un número decimal (siempre retornado). |
coords.accuracy |
La precisión de la posición (siempre retornado). |
coords.altitude |
La altitud en metros sobre el nivel del mar (retornado si esta disponible). |
coords.altitudeAccuracy |
La precisión de altitud de la posición (retornado si esta disponible). |
coords.heading |
El rumbo en grados en sentido de las manecillas del reloj desde el norte (retornado si esta disponible). |
coords.speed |
La velocidad en metros por segundo (retornado si esta disponible). |
timestamp |
La fecha/hora de respuesta (retornado si esta disponible). |
El Objeto Geolocalización y otras funciones interesantes
El objeto Geolocalización también tiene otras funciones interesantes:
watchPosition()
- Retorna la posición actual del usuario y continúa retornando la posición actualizada mediante usuario se mueve, como el GPS en un auto.clearWatch()
- Detiene la funciónwatchPosition()
.
En el siguiente ejemplo muestra la función watchPosition()
. Se necesita un dispositivo GPS preciso para probar esto, como un teléfono inteligente:
<script>
var x = document.getElementById("demo");
function getLocation(){
if(navigator.geolocation){
navigator.geolocation.watchPosition(showPosition);
}else{
x.innerHTML = "Geolocalización no es soportada por el navegador.";
}
}
function showPosition(position){
x.innerHTML = "Latitud: " + position.coords.latitude +
"<br>Longitud: " + position.coords.longitude;
}
</script>