Cómo utilizar la API de geolocalización

Usando la API de geolocalización podemos pedirle al navegador las coordenadas de posición del usuario

El navegador expone unnavigator.geolocationobjeto, a través del cual haremos todas las operaciones de geolocalización.

Solo está disponible en páginas servidas mediante HTTPS, por motivos de seguridad, y está disponible en todos los navegadores modernos.

navigator.geolocation

The geolocation object

Ya quewindowes el objeto global, podemos accedernavigatorsin especificarwindow.navigator

loswindow.navigatorpropiedad expuesta por los navegadores apunta a unObjeto navegadorel cual es unobjeto contenedorque pone a nuestra disposición una gran cantidad de API de plataforma web.

losgeolocationobject proporciona los siguientes métodos:

  • getCurrentPosition()
  • watchPosition()
  • clearWatch()

El primero se utiliza para obtener las coordenadas de la posición actual. Cuando llamamos a este método por primera vez, el navegador solicita automáticamente al usuario permiso para compartir esta información con nosotros.

Así es como se ve esta interfaz en Chrome:

The permission screen in Chrome

en Firefox:

The permission screen in Firefox

y en Safari:

The permission screen in Safari

Esto debe hacerse solo una vez por origen. Puede cambiar la decisión que tomó y revertir una decisión de permiso. Así es como lo hace con Chrome, haciendo clic en el ícono de candado cerca del dominio:

Permission details

Una vez concedido este permiso, podemos continuar.

Obtener la posición del usuario

Comencemos con este código de muestra:

navigator.geolocation.getCurrentPosition(() => {})

Debería aparecer el panel de permisos. Permita el permiso.

Fíjate como pasé un vacíofunción de flecha, porque la función quiere una función de devolución de llamada.

Esta función se pasa aPositionobjeto, que contiene la ubicación real:

navigator.geolocation.getCurrentPosition(position => {
  console.log(position)
})

Este objeto tiene 2 propiedades:

losCoordinatesEl objeto viene con varias propiedades que definen la ubicación:

  • accuracyla precisión de la posición medida, expresada en metros
  • altitudeel valor de altitud medido
  • altitudeAccuracyla precisión de la altitud medida, expresada en metros
  • headingla dirección hacia la que se desplaza el dispositivo. Expresado en grados (0 = Norte, Este = 90, Sur = 180, Oeste = 270)
  • latitudeel valor de latitud medido
  • longitudeel valor de longitud medido
  • speedla velocidad a la que viaja el dispositivo, expresada en metros por segundo

Dependiendo de la implementación y el dispositivo, algunos de ellos seránnull. Por ejemplo, en Chrome ejecutándose en mi MacBook Air, solo obtuve valores paraaccuracy,latitudeylongitude.

navigator.geolocation.getCurrentPosition(position => {
  console.log(position.coords.latitude)
  console.log(position.coords.longitude)
})

Observando la posición por cambios

Además de obtener la posición de usuario una vez, lo que puede hacer usandogetCurrentPosition(), puedes usar elwatchPosition()método denavigator.geolocationpara registrar una función de devolución de llamada a la que se recurrirá en todos y cada uno de los cambios que el dispositivo nos comunique.

Uso:

navigator.geolocation.watchPosition(position => {
	console.log(position)
})

Por supuesto, el navegador solicitará el permiso también con este método, si aún no se ha concedido.

Podemos dejar de buscar una posición llamando alnavigator.geolocation.clearWatch()método, pasándole eliddevuelto porwatchPosition():

const id = navigator.geolocation.watchPosition(position => {
	console.log(position)
})

//stop watching after 10 seconds
setTimeout(() => {
navigator.geolocation.clearWatch(id)
}, 10 * 1000)

Si el usuario niega el permiso

¿Recuerda la ventana emergente de permisos que muestra el navegador cuando llamamos a uno de los métodos para obtener la posición?

Si el usuario lo niega, podemos interceptar este escenario agregando una función de manejo de errores, como segundo parámetro a los métodos.getCurrentPosition()ywatchPosition().

navigator.geolocation.getCurrentPosition(position => {
  console.log(position)
}, error => {
	console.error(error)
})

El objeto pasado al segundo parámetro contiene uncodepropiedad para distinguir entre tipos de error:

  • 1significa permiso denegado
  • 2significa posición no disponible
  • 3significa tiempo de espera

Añadiendo más opciones

Cuando hablé de errores anteriormente, mencioné el error de tiempo de espera. Buscar la posición puede llevar algún tiempo y podemos establecer un tiempo máximo permitido para realizar la operación, como opción.

Puede agregar un tiempo de espera agregando un tercer parámetro a los métodosgetCurrentPosition()ywatchPosition(), un objeto.

navigator.geolocation.getCurrentPosition(position => {
  console.log(position)
}, error => {
	console.error(error)
}, {

})

Dentro de este objeto podemos pasar las propiedades

  • timeoutpara establecer el número de milisegundos antes de que salgan los errores de solicitud
  • maximumAgepara establecer la "edad" máxima de la posición almacenada en caché por el navegador. No aceptamos uno más antiguo que la cantidad establecida de milisegundos.
  • enableHighAccuracyun booleano por defectofalse, requiere una posición con el mayor nivel de precisión posible (lo que puede llevar más tiempo y más potencia)

Uso de ejemplo:

navigator.geolocation.getCurrentPosition(position => {
  console.log(position)
}, error => {
	console.error(error)
}, {
  timeout: 1000,
  maximumAge: 10000,
  enableHighAccuracy: true
})

Más tutoriales de navegador:


Tech Wiki en línea!