Resumen: en este post vamos a ver cómo obtener la ubicación del usuario (coordenadas) usando JavaScript.
Gracias a este método podremos obtener la ubicación precisa de un teléfono, tableta o computadora, pues mientras se cuente con un navegador actualizado y GPS o internet se puede obtener la latitud y longitud de un dispositivo.
Para acceder a la ubicación con JavaScript vamos a usar navigator.geolocation
y su método getCurrentPosition
.
También vamos a manejar los permisos de acceso a la ubicación desde el navegador.
Puedes acceder a la demostración aquí, y al repositorio en GitHub aquí.
Una vez aclarados los puntos, comencemos.
Debemos mirar si navigator
tiene geolocation
con un:
if ("geolocation" in navigator)
Después, debemos obtener la ubicación llamando a getCurrentPosition
así:
Al llamar a ese método, se pedirá permiso al usuario:
Los argumentos que se envían al método son los siguientes…
Una función callback en caso de que el usuario dé permiso y se pueda acceder a la ubicación. Ese callback va a recibir un objeto que tiene:
coords
: un objeto con la latitud en latitude
, y la longitud en longitude
timestamp
: el tiempo en el que fue obtenida la ubicaciónUna función callback en caso de error, que recibe como argumento la causa del error. Esto puede ser porque el usuario denegó la petición de acceso a la ubicación o porque no cuenta con el hardware necesario
Alta precisión, por defecto está en false
pero podemos ponerla en true.
Esto permite que accedamos a una ubicación más precisa obtenida por GPS, aunque puede tardar más en obtenerse
Cuántos milisegundos puede tomarse el dispositivo en regresarnos la ubicación. Por defecto es Infinity
.
Esto funciona para decir algo como “intenta obtener la ubicación pero si no es devuelta en menos de 10 segundos entonces cancela todo”
Nota: ten cuidado con este valor, si lo pones muy corto puede que obtengas un error debido a que la ubicación no se ha podido obtener. Todo depende del dispositivo y las circunstancias.
La ubicación es guardada en un caché, y cuando accedemos a la misma puede que se nos devuelva una ubicación de hace algunos milisegundos.
Con esta opción podemos establecer qué tan fresca queremos la ubicación, un valor de 0
forzaría a obtener la última ubicación.
Ahora que ya he explicado la teoría, veamos la práctica. Analicemos el siguiente código:
Al llamar a funcionInit
se requerirá el acceso a la ubicación.
Primero definimos las funciones de callback y las opciones de obtención de ubicación, después invocamos a getCurrentPosition
y eso es todo lo necesario.
Ahora veamos un ejemplo de implementación del código antes mencionado.
Creamos una página HTML basada en Bootstrap 4. Definimos algunos elementos y en ellos escribimos la ubicación.
Queda así:
Después tenemos el siguiente script en donde esperamos a DOMContentLoaded
y ejecutamos las acciones. Es el mismo código de arriba pero con unos elementos extra:
Si el usuario da el permiso, se verá algo así:
Me he dado a la tarea de poner un enlace con Google maps que simplemente te lleva a esa web con las coordenadas que se obtuvieron de la app.
Los caracteres raros que definen la cadena son backticks.
En próximos tutoriales te mostraré a observar cuando la ubicación cambia y también a enviar las coordenadas a un servidor con PHP.
Mientras tanto puedes acceder a la demostración aquí, y al repositorio en GitHub aquí.
Actualización: ya existe la parte 2 en donde vemos cómo recibir actualizaciones de ubicación con JavaScript.
En mi blog te he enseñado a usar youtube-dl para descargar vídeos con permiso del…
Siguiendo con los tutoriales que consumen la API de los Bots de Telegram con cURL…
En un post previo te enseñé a enviar un mensaje en nombre de un Bot…
En este artículo te voy a mostrar una guía para imprimir en una impresora térmica…
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…
Esta web usa cookies.
Ver comentarios
Hola , muy interesante tu blog ,como obtener el getcurrentposition bypaseando la confirmacion,
Saludos.
Buenas tardes, espero todo esté super.
¿Habrá alguna manera de acceder a las coordenadas sin internet?
No se necesita internet para acceder a las coordenadas
Buena tarde, como podría pasar la variable a php para guardar las coordenadas en una base de datos?
saludos
Primero: https://parzibyte.me/blog/2019/08/09/obtener-ubicacion-javascript-enviarla-php/
Después: https://parzibyte.me/blog/2019/07/17/php-bases-de-datos-ejemplos-tutoriales-conexion/
No olvide compartir y seguirme