Utilizando la API de Geolocalización podemos solicitar al navegador las coordenadas de la posición del usuario
El navegador expone un navigator.geolocation
objeto, 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 window
es un objeto global, podemos acceder navigator
sin especificarwindow.navigator
La window.navigator
propiedad 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 geolocation
objeto 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 Position
objeto que contiene la ubicación real:
navigator.geolocation.getCurrentPosition((position) = { console.log(position)})
Este objeto tiene 2 propiedades:
coords
, unCoordinates
objetotimestamp
, la marca de tiempo de UNIX cuando se recuperó la posición
El Coordinates
objeto viene con varias propiedades que definen la ubicación:
accuracy
La precisión de la posición medida, expresada en metros.altitude
el valor de altitud medidoaltitudeAccuracy
La precisión de la altitud medida, expresada en metros.heading
La dirección hacia la que se desplaza el dispositivo. Expresada en grados (0 = Norte, Este = 90, Sur = 180, Oeste = 270)latitude
el valor de latitud medidolongitude
el valor de longitud medidospeed
La 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
, latitude
y 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.geolocation
para 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 id
devuelto 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 code
propiedad para distinguir entre tipos de error:
1
significa permiso denegado2
significa posición no disponible3
significa 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
timeout
para establecer el número de milisegundos antes de que la solicitud genere un errormaximumAge
para 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 establecidaenableHighAccuracy
Un valor booleano por defectofalse
, 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:
- Introducción a React
- Agregar evento de clic a los elementos DOM devueltos desde querySelectorAll
- Cómo cambiar el valor de un nodo DOM
- 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
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