API de Geolocalización Web

Ubicar la ubicación del usuario

La API de geolocalización HTML se utiliza para obtener la ubicación del usuario.

Debido a que esto podría dañar la privacidad, la ubicación no está disponible a menos que el usuario apruebe.

Prueba por tu cuenta

Notas:La geolocalización es la más precisa para dispositivos con GPS (como los smartphones).

Todos los navegadores admiten el API de Geolocation:

Chrome IE Firefox Safari Opera
Compatibilidad Compatibilidad Compatibilidad Compatibilidad Compatibilidad

Notas:Desde Chrome 50 en adelante, el API de Geolocation solo será compatible con contextos seguros, como HTTPS. Si su sitio se hospeda en una fuente no segura (por ejemplo, HTTP), las solicitudes para obtener la ubicación del usuario ya no funcionarán.

Uso de Geolocation API

getCurrentPosition() El método se utiliza para devolver la ubicación del usuario.

El siguiente ejemplo devuelve la latitud y longitud de la ubicación del usuario:

Ejemplo

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

Prueba por tu cuenta

Ejemplo de explicación:

  1. Verificar si se admite Geolocation
  2. Si se admite, ejecute el método getCurrentPosition(). Si no, muestre un mensaje al usuario
  3. Si el método getCurrentPosition() tiene éxito, devuelve un objeto coordinates al función especificada en el parámetro (showPosition)
  4. La función showPosition() muestra la latitud y longitud

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

Manejo de errores y denegación

getCurrentPosition() El segundo parámetro del método se utiliza para manejar errores. Si no se puede obtener la ubicación del usuario, especifica la función a ejecutar:

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 tiempo de espera para obtener la ubicación del usuario ha expirado.";
      break;
    case error.UNKNOWN_ERROR:
      x.innerHTML = "Se produjo un error desconocido.";
      break;
  }
}

Prueba por tu cuenta

Mostrar resultados en el mapa

Para mostrar los resultados en el mapa, debe acceder al servicio de mapa, por ejemplo, Google Maps.

En el siguiente ejemplo, las latitudes y longitudes devueltas se utilizan para mostrar la ubicación en Google Maps (usando imagen estática):

Ejemplo

function showPosition(position) {
  let latlon = position.coords.latitude + "," + position.coords.longitude;
  let 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 ubicación

Esta página muestra cómo mostrar la ubicación del usuario en el mapa.

Geolocation también es muy útil para información específica de ubicación, como:

  • Información local más reciente
  • Mostrar puntos de interés cercanos al usuario
  • Navegación paso a paso (Turn-by-turn navigation) (GPS)

Método getCurrentPosition() - Devolución de datos

getCurrentPosition() El método devuelve un objeto en caso de éxito. Siempre devuelve las propiedades de latitud, longitud y precisión. Si están disponibles, también devuelve otras propiedades:

Atributos Devolver
coords.latitude Latitud expresada como número decimal (siempre se devuelve).
coords.longitude Longitud expresada como número decimal (siempre se devuelve).
coords.accuracy Precisión de la ubicación (siempre se devuelve).
coords.altitude Altitud sobre el nivel del mar en metros (si está disponible, se devuelve).
coords.altitudeAccuracy Precisión de altura de la ubicación (si está disponible, se devuelve).
coords.heading Orientación desde el norte en sentido horario (si está disponible, se devuelve).
coords.speed Velocidad en metros/segundo (si está disponible, se devuelve).
timestamp Fecha y hora de respuesta (si está disponible, se devuelve).

Métodos interesantes del objeto Geolocation

El objeto Geolocation también tiene otros métodos interesantes:

  • watchPosition() - Devolver la posición actual del usuario y seguir devolviendo actualizaciones de posición mientras el usuario se mueve (como en un GPS en un coche).
  • clearWatch() - Detener el método watchPosition ()。

Los siguientes ejemplos muestran watchPosition() Métodos. Necesitas un dispositivo GPS preciso para probar (por ejemplo, un smartphone):

Ejemplo

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

Prueba por tu cuenta