Cómo utilizar la API de geolocalización

 

 

 

Como utilizar la api de geolocalizacion 1

 

Utilizando la API de Geolocalización podemos solicitar al navegador las coordenadas de la posición del usuario

El navegador expone un navigator.geolocationobjeto, a través del cual realizaremos 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

Dado que windowes un objeto global, podemos acceder navigatorsin especificarwindow.navigator

La window.navigatorpropiedad expuesta por los navegadores apunta a un objeto Navigator , que es un objeto contenedor que pone a nuestra disposición muchas API de Web Platform.

El geolocationobjeto 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 automáticamente solicita al usuario permiso para compartir esta información con nosotros.

Así es como se ve esta interfaz en Chrome:

en Firefox:

y en Safari:

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

Una vez concedido este permiso, podemos proceder.

Obtener la posición del usuario

Comencemos con este código de muestra:

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

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

Observe cómo pasé una función de flecha vacía , porque la función quiere una función de devolución de llamada.

A esta función se le pasa un Positionobjeto que contiene la ubicación real:

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

Este objeto tiene 2 propiedades:

  • coords, un Coordinatesobjeto
  • timestamp, la marca de tiempo de UNIX cuando se recuperó la posición

El Coordinatesobjeto 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. Expresada 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.

Según la implementación y el dispositivo, algunos de ellos serán null. Por ejemplo, en Chrome que se ejecuta en mi MacBook Air, solo obtuve valores para accuracy, latitudey longitude.

 

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

Observando la posición para detectar cambios

Además de obtener la posición del usuario una vez, lo cual puedes hacer usando getCurrentPosition(), puedes usar el watchPosition()método de navigator.geolocationpara registrar una función de devolución de llamada que se llamará en cada cambio que el dispositivo nos comunique. Fotos Porno y actrices porno

Uso:

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

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

Podemos dejar de buscar una posición llamando al navigator.geolocation.clearWatch()método y pasándole el valor iddevuelto por watchPosition():

const id = navigator.geolocation.watchPosition((position) = { console.log(position)})//stop watching after 10 secondssetTimeout(() = { navigator.geolocation.clearWatch(id)}, 10 * 1000)

Si el usuario niega el permiso

¿Recuerdas 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()y watchPosition().

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

El objeto pasado al segundo parámetro contiene una codepropiedad 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. Consultar 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étodos getCurrentPosition()y watchPosition(), 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 la solicitud genere un error
  • maximumAgepara establecer la “antigüedad” máxima de la posición almacenada en caché por el navegador. No aceptamos ninguna posición anterior a la cantidad de milisegundos establecida
  • enableHighAccuracyUn valor booleano por defecto false, requiere una posición con el mayor nivel de precisión posible (lo que podría requerir más tiempo y más energía)

Ejemplo de uso:

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



Tal vez te puede interesar:

  1. Introducción a React
  2. Agregar evento de clic a los elementos DOM devueltos desde querySelectorAll
  3. Cómo cambiar el valor de un nodo DOM
  4. Cómo comprobar si un elemento DOM tiene una clase

Cómo utilizar la API de geolocalización

Obtener la posición del usuarioObservando la posición para detectar cambiosSi el usuario niega el permisoAñadiendo más opciones

programar

es

https://aprendeprogramando.es/static/images/programar-como-utilizar-la-api-de-geolocalizacion-2103-0.jpg

2024-10-15

 

Como utilizar la api de geolocalizacion 1
Como utilizar la api de geolocalizacion 1

Si crees que alguno de los contenidos (texto, imagenes o multimedia) en esta página infringe tus derechos relativos a propiedad intelectual, marcas registradas o cualquier otro de tus derechos, por favor ponte en contacto con nosotros en el mail [email protected] y retiraremos este contenido inmediatamente

 

 

Update cookies preferences