Contexto seguro

Esta función solo está disponible en contextos seguros (HTTPS), en algunos o todos los navegadores compatibles.

La API de geolocalización se utiliza para recuperar la ubicación del usuario, de modo que se pueda utilizar, por ejemplo, para mostrar su posición mediante una API de mapeo. Este artículo explica los conceptos básicos de cómo usarlo.

El objeto de geolocalización

La API de geolocalización está disponible a través de navigator.geolocation objeto.

Si el objeto existe, los servicios de geolocalización están disponibles. Puede probar la presencia de geolocalización de la siguiente manera:

if('geolocation'in navigator)/* geolocation is available */else/* geolocation IS NOT available */

Conseguir la posición actual

Para obtener la ubicación actual del usuario, puede llamar al getCurrentPosition() método. Esto inicia una solicitud asincrónica para detectar la posición del usuario y consulta el hardware de posicionamiento para obtener información actualizada. Cuando se determina la posición, se ejecuta la función de devolución de llamada definida. Opcionalmente, puede proporcionar una segunda función de devolución de llamada para que se ejecute si se produce un error. Un tercer parámetro, opcional, es un objeto de opciones donde puede establecer la edad máxima de la posición devuelta, el tiempo de espera para una solicitud y si desea una alta precisión para la posición.

Nota: Por defecto, getCurrentPosition() intenta responder lo más rápido posible con un resultado de baja precisión. Es útil si necesita una respuesta rápida independientemente de la precisión. Los dispositivos con GPS, por ejemplo, pueden tardar un minuto o más en obtener una localización de GPS, por lo que es posible que se devuelvan datos menos precisos (ubicación IP o wifi) a getCurrentPosition().

navigator.geolocation.getCurrentPosition((position)=>doSomething(position.coords.latitude, position.coords.longitude););

El ejemplo anterior hará que doSomething() función que se ejecutará cuando se obtenga la ubicación.

Observando la posición actual

Si los datos de posición cambian (ya sea por el movimiento del dispositivo o si llega información geográfica más precisa), puede configurar una función de devolución de llamada a la que se llama con esa información de posición actualizada. Esto se hace usando el watchPosition() función, que tiene los mismos parámetros de entrada que getCurrentPosition(). La función de devolución de llamada se llama varias veces, lo que permite al navegador actualizar su ubicación a medida que se mueve o proporcionar una ubicación más precisa a medida que se utilizan diferentes técnicas para geolocalizarlo. La función de devolución de llamada de error, que es opcional al igual que lo es para getCurrentPosition(), se puede llamar repetidamente.

Nota: Puedes usar watchPosition() sin una inicial getCurrentPosition() llama.

const watchID = navigator.geolocation.watchPosition((position)=>doSomething(position.coords.latitude, position.coords.longitude););

los watchPosition() El método devuelve un número de identificación que se puede utilizar para identificar de forma única al observador de posición solicitado; utiliza este valor junto con el clearWatch() método para dejar de ver la ubicación del usuario.

navigator.geolocation.clearWatch(watchID);

Afinando la respuesta

Ambos getCurrentPosition() y watchPosition() aceptar una devolución de llamada exitosa, una devolución de llamada de error opcional y una PositionOptions objeto.

Este objeto le permite especificar si desea habilitar una alta precisión, una edad máxima para el valor de posición devuelto (hasta esta edad se almacenará en caché y se reutilizará si se solicita la misma posición nuevamente; después de esto, el navegador solicitará datos de posición nuevos), y un valor de tiempo de espera que dicta durante cuánto tiempo el navegador debe intentar obtener los datos de posición antes de que se agote.

Una llamada a watchPosition podría verse así:

functionsuccess(position)doSomething(position.coords.latitude, position.coords.longitude);functionerror()alert('Sorry, no position available.');const options =
  enableHighAccuracy:true,
  maximumAge:30000,
  timeout:27000;const watchID = navigator.geolocation.watchPosition(success, error, options);

Describiendo un puesto

La ubicación del usuario se describe mediante un GeolocationPosition instancia de objeto, que a su vez contiene una GeolocationCoordinates instancia de objeto.

los GeolocationPosition instancia contiene solo dos cosas, una coords propiedad que contiene el GeolocationCoordinates instancia, y una timestamp propiedad que contiene un DOMTimeStamp instancia que representa la hora a la que se recuperaron los datos de posición.

los GeolocationCoordinates La instancia contiene varias propiedades, pero las dos que usará con más frecuencia son latitude y longitude, que es lo que necesita para dibujar su posición en un mapa. Por lo tanto, muchas devoluciones de llamada de éxito de geolocalización parecen bastante simples:

functionsuccess(position)const latitude  = position.coords.latitude;const longitude = position.coords.longitude;// Do something with your latitude and longitude

Sin embargo, puede obtener una serie de otros bits de información de un GeolocationCoordinates objeto, incluida la altitud, la velocidad, la dirección en la que mira el dispositivo y una medida de precisión de los datos de altitud, longitud y latitud.

Manejo de errores

La función de devolución de llamada de error, si se proporciona al llamar getCurrentPosition() o watchPosition(), espera un GeolocationPositionError instancia de objeto como su primer parámetro. Este tipo de objeto contiene dos propiedades, una code que indica qué tipo de error se ha devuelto, y una lectura humana message que describe lo que significa el código de error.

Podrías usarlo así:

functionerrorCallback(error)alert(`ERROR($error.code): $error.message`);;

Ejemplos de

En el siguiente ejemplo, la API de geolocalización se utiliza para recuperar la latitud y la longitud del usuario. Si tiene éxito, el hipervínculo disponible se completa con un openstreetmap.org URL que mostrará su ubicación.

HTML

<buttonid="find-me">Show my locationbutton><br/><pid="status">p><aid="map-link"target="_blank">a>

JavaScript

functiongeoFindMe()const status = document.querySelector('#status');const mapLink = document.querySelector('#map-link');

  mapLink.href ='';
  mapLink.textContent ='';functionsuccess(position)const latitude  = position.coords.latitude;const longitude = position.coords.longitude;

    status.textContent ='';
    mapLink.href =`https://www.openstreetmap.org/#map=18/$latitude/$longitude`;
    mapLink.textContent =`Latitude: $latitude °, Longitude: $longitude °`;functionerror()
    status.textContent ='Unable to retrieve your location';if(!navigator.geolocation)
    status.textContent ='Geolocation is not supported by your browser';else
    status.textContent ='Locating…';
    navigator.geolocation.getCurrentPosition(success, error);

document.querySelector('#find-me').addEventListener('click', geoFindMe);

Resultado