Resumen: en este post te mostraré a escuchar el cambio de ubicación de un dispositivo con JavaScript. Por ejemplo, vigilar el cambio de ubicación en un dispositivo móvil cuando el usuario se mueve, camina o conduce.
Vamos a usar JavaScript y la API ofrecida a través de navigator.geolocation
. Concretamente veremos la función watchPosition
.
Nota: recomiendo primero dar un repaso por mi otro post para ver la introducción al acceso a la ubicación desde JavaScript.
Si quieres ver lo que haremos al final del tutorial, puedes ver esta demostración. También puedes ver el repositorio en GitHub.
Cuando queremos obtener actualizaciones de la ubicación del dispositivo en JavaScript no llamamos al método getCurrentLocation
, mejor invocamos a watchPosition
para suscribirnos a un evento y recibir actualizaciones periódicas.
El método watchPosition
devuelve un id para que más tarde se pueda detener usando el método clearWatch
(así como setInterval y clearInterval)
Cabe mencionar que este método para vigilar la ubicación toma los mismos argumentos que el de getCurrentLocation
:
Los dos primeros son callbacks, el primero en caso de éxito, el segundo en caso de error. El último argumento define las opciones de la suscripción a las actualizaciones de ubicación.
De nuevo lo digo, si no entiendes mucho esto, lee primero mi otro post.
Nota: el método onUbicacionConcedida
será llamado cada que haya actualizaciones de ubicación.
Ahora sí veamos un ejemplo de código.
Al inicio comprobamos que el navegador soporte la API de geolocation
.
Después definimos una variable en donde vamos a guardar el id que regrese watchPosition
, además de otras funciones como la que detiene el watcher y la que lo inicia.
La función onUbicacionConcedida
será llamada múltiples veces, cada que la ubicación se actualice.
Si queremos detener el watcher invocamos a clearWatch
. En ese mismo método convertimos a idWatcher
en null
.
Voy a mostrarte un ejemplo que al final se verá como en la imagen del inicio. Definimos un layout básico de Bootstrap 4:
Fíjate en los botones, pues uno inicia las actualizaciones de ubicación y otro las detiene.
También tenemos unos span
que muestran la última latitud y longitud obtenida, además de una etiqueta pre
para loguear.
Todo eso lo obtenemos con JavaScript, agregamos listeners de los click de los botones e interactuamos con la ubicación del usuario:
Como ves, es el mismo código de hace un momento pero ahora hemos agregado interacción con el DOM.
Al final tendremos una web que se ve así:
De esta manera podemos ver el camino que un usuario recorre, saber si un dispositivo llegó a determinado lugar, etcétera.
Como puedes ver, a la izquierda está el timestamp indicando cuándo fue obtenida la ubicación.
Recuerda, esta es la parte 2 de alguna forma. Si quieres ver lo básico, mira este post.
El código lo puedes ver en GitHub y la demostración la puedes ver aquí.
La impresión de un PDF en cualquier impresora se puede automatizar con un bot de…
Hoy te enseñaré cómo enviar un mensaje a un usuario desde un bot de Telegram…
El día de hoy te enseñaré algo muy sencillo pero útil al programar con PHP:…
El plugin para imprimir en impresoras térmicas alcanza hoy su versión 3.4.0 agregando soporte para…
En ocasiones es necesario leer los pixeles y colores de una imagen con JavaScript del…
Siguiendo con los tutoriales de listas desplegables o select con JavaScript, vamos a ver cómo…
Esta web usa cookies.
Ver comentarios
Como puedo obtener los datos longitud y latitud con 15 digitos a la derecha de la coma en vez de 6 para tener mas exactitud
Hola. Si tiene alguna consulta puede hacérmela llegar en https://parzibyte.me/#contacto
Hola,
Como podria hacer para que el script o el proceso no se detenga en el celular cuando la pantalla no está activa (estando el celular prendido).
Gracias.
Crees que se podría hacer con una app hibrida?
Sí
Hola. No creo que se pueda, por las limitaciones de los navegadores. Podría ser con una app nativa, pero desde el navegador lo veo complejo.
Saludos :)