notifications Notificaciones

Marcar todas como leídas

Ver más

lightbulb_outline

Geolocalización JavaScript API

timer 1 Min.

remove_red_eye 974

calendar_today

La api de geolocalización de HTML5 nos permitirá obtener la ubicación actual de nuestro dispositivo, para comenzar lo que tenemos que hacer es simplemente hacer uso de la interfaz en javascript.

Esta interfaz está representada con un objeto llamado navigator, al cual podemos acceder directamente de la siguente manera.

console.log(navigator);

Este objeto contiene cierta información sobre nuestro cliente, dentro de este objecto a su vez nos encontramos con un objeto llamado geolocation, el cual necesitaremos para poder obtener la ubicación de nuestro usuario.

console.log(navigator.geolocation);

Este objecto contiene 3 diferentes métodos.

getCurrentPosition
watchPosition
clearWatch

El método que nos interesa es el getCurrentPosition el cual recibe de parametro un closure y nos devuelve la ubicación siempre y cuando nuestro usuario acepte los permisos.

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

Esto nos deberia de imprimir en consola lo siguiente.

coords: Coordinates
accuracy: 7383
altitude: null
altitudeAccuracy: null
heading: null
latitude: 16.7582471
longitude: -93.16793539999999
speed: null
__proto__: Coordinates
timestamp: 1571240221836
__proto__: Position

Lo que aquí nos interesa es la latitude y logitude, con esto ahora ya sabes la ubicación de nuestro usuario.

Ahora que pasa si el usuario niega los permisos, bien, si queremos definir alguna acción en dado caso esto suceda, lo que podemos hacer es pasar de parametro un closure al método getCurrentPosition, este segundo parametro se ejecuta si nuestro usuario niega los permisos.

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

Ahora que pasa si necesitamos saber la ubicación cada cierto tiempo, para ello podemos usar al método watchPosition el cual se ejecuta periodicamente cada vez que la ubicación del dispositivo cambia.

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

Este método nos devuelve un id que debemos usar con el método clearWatch si lo que necesitamos es dejar de recibir actualizaciones de la ubicación.

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

navigator.geolocation.clearWatch(id);

Otros artículos del blog

Comunidad