Geolocalización HTML5

HTML5 Geolocation (geolocalización) se utiliza para ubicar la ubicación del usuario.

Pruebe usted mismo: muestre su ubicación en Google Maps

Ubicar la ubicación del usuario

La API de geolocalización de HTML5 se utiliza para obtener la ubicación geográfica del usuario.

Dado que esta característica puede violar la privacidad del usuario, la información de ubicación del usuario no está disponible a menos que el usuario acepte.

Compatibilidad del navegador

Internet Explorer 9, Firefox, Chrome, Safari y Opera admiten la geolocalización.

Nota:Para dispositivos con GPS, como el iPhone, la geolocalización es más precisa.

HTML5 - Uso de geolocalización

Utilice el método getCurrentPosition() para obtener la ubicación del usuario.

El siguiente ejemplo es una instancia simple de geolocalización que puede devolver la latitud y longitud de la ubicación del usuario.

Ejemplo

<script>
var x=document.getElementById("demo");
function getLocation()
  {
  if (navigator.geolocation)
    {
    navigator.geolocation.getCurrentPosition(showPosition);
    }
  else{x.innerHTML="Geolocalización no es compatible con este navegador.";}
  }
function showPosition(position)
  {
  x.innerHTML="Latitud: " + position.coords.latitude +
  "<br />Longitud: " + position.coords.longitude;
  }
</script>

Prueba personalmente

Explicación del ejemplo:

  • Detectar si se admite la geolocalización
  • Si se admite, se ejecuta el método getCurrentPosition(). Si no se admite, se muestra un mensaje al usuario.
  • Si getCurrentPosition() se ejecuta con éxito, devuelve un objeto coordinates al función especificada en el parámetro showPosition
  • La función showPosition() obtiene y muestra la latitud y longitud

El ejemplo anterior es un script básico de geolocalización sin manejo de errores.

Manejo de errores y denegación

El segundo parámetro del método getCurrentPosition() se utiliza para manejar errores. Especifica la función que se ejecutará cuando no se pueda obtener la ubicación del usuario:

Ejemplo

function showError(error)
  {
  switch(error.code)
    {
    case error.PERMISSION_DENIED:
      x.innerHTML="El usuario denegó la solicitud de geolocalización."
      break;
    case error.POSITION_UNAVAILABLE:
      x.innerHTML="La información de ubicación no está disponible."
      break;
    case error.TIMEOUT:
      x.innerHTML="El solicitud para obtener la ubicación del usuario se agotó el tiempo."
      break;
    case error.UNKNOWN_ERROR:
      x.innerHTML="Ocurrió un error desconocido."
      break;
    }
  }

Prueba personalmente

Código de error:

  • Permiso denegado - El usuario no permite la geolocalización
  • Ubicación no disponible - No se puede obtener la ubicación actual
  • Timeout - Operación timeout

Mostrar resultados en el mapa

Para mostrar los resultados en el mapa, debe acceder a un servicio de mapas que utilice coordenadas, como Google Maps o Baidu Maps:

Ejemplo

function showPosition(position)
{
var latlon=position.coords.latitude+","+position.coords.longitude;
var img_url="http://maps.googleapis.com/maps/api/staticmap?center="
+latlon+"&zoom=14&size=400x300&sensor=false";
document.getElementById("mapholder").innerHTML="<img src='"+img_url+"' />";
}

Prueba personalmente

En el ejemplo anterior, usamos los datos de longitud y latitud devueltos para mostrar la ubicación en el mapa de Google (usando imágenes estáticas).

Script de Google Maps

El enlace superior le muestra cómo usar scripts para mostrar un mapa interactivo con opciones de marcadores, escalado y arrastrar.

Información de ubicación específica

Esta página muestra cómo mostrar la ubicación del usuario en el mapa. Sin embargo, la geolocalización también es muy útil para obtener información sobre una ubicación específica.

Ejemplo:

  • Actualizar información local
  • Mostrar puntos de interés cercanos al usuario
  • Sistema de navegación inercial interactiva (GPS)

Método getCurrentPosition() - Datos devueltos

Si tiene éxito, el método getCurrentPosition() devuelve un objeto. Siempre se devuelven los atributos latitude, longitude y accuracy. Si están disponibles, también se devuelven las siguientes propiedades.

Atributo Descripción
coords.latitude Latitud decimal
coords.longitude Longitud decimal
coords.accuracy Precisión de ubicación
coords.altitude Altitud, medida en metros sobre el nivel del mar
coords.altitudeAccuracy Precisión de altitud de ubicación
coords.heading Dirección, desde el norte verdadero en grados
coords.speed Velocidad, en metros por segundo
timestamp Fecha/hora de respuesta

Objeto Geolocation - Otros métodos interesantes

watchPosition() - Devuelve la ubicación actual del usuario y continúa devolviendo actualizaciones de ubicación cuando el usuario se mueve (como un GPS en un coche).

clearWatch() - Detener el método watchPosition()

El siguiente ejemplo muestra el método watchPosition(). Necesitará un dispositivo GPS preciso para probar este ejemplo (por ejemplo, iPhone):

Ejemplo

<script>
var x=document.getElementById("demo");
function getLocation()
  {
  if (navigator.geolocation)
    {
    navigator.geolocation.watchPosition(showPosition);
    }
  else{x.innerHTML="Geolocalización no es compatible con este navegador.";}
  }
function showPosition(position)
  {
  x.innerHTML="Latitud: " + position.coords.latitude +
  "<br />Longitud: " + position.coords.longitude;
  }
</script>

Prueba personalmente