Un simple contador de viajes que usa la API de ubicación geográfica

Michael Mahemoff

Introducción

La API de Geolocation te permite saber dónde está el usuario y hacer un seguimiento de su ubicación mientras se mueve, siempre con su consentimiento. Esta funcionalidad se puede usar como parte de las consultas de los usuarios, p.ej., para guiar a alguien a un punto de destino. También se puede usar para "geoetiquetar" parte del contenido que creó el usuario, p.ej., para marcar dónde se tomó una foto. La API no depende del dispositivo; no le importa cómo el navegador determine la ubicación, siempre y cuando los clientes puedan solicitar y recibir datos de ubicación de forma estándar. El mecanismo subyacente puede ser a través de GPS, Wi-Fi o simplemente pedirle al usuario que ingrese su ubicación de forma manual. Dado que cualquiera de estas búsquedas llevará un tiempo, la API es asíncrona; le pasas un método de devolución de llamada cada vez que solicitas una ubicación.

El ejemplo que se muestra aquí es un odómetro que muestra la ubicación inicial y mantiene una visualización de la distancia recorrida desde que se cargó la página.

Paso 1: Cómo verificar la compatibilidad

Para verificar la compatibilidad, puedes probar la presencia del objeto de ubicación geográfica:

// check for Geolocation support
if (navigator.geolocation) {
  console.log('Geolocation is supported!');
}
else {
  console.log('Geolocation is not supported for this Browser/OS version yet.');
}

Paso 2: Declara el HTML del medidor de viaje

En este ejemplo, compilarás un odómetro, por lo que debes declarar el siguiente código HTML:

<div id="tripmeter">
<p>
Starting Location (lat, lon):<br/>
<span id="startLat">???</span>°, <span id="startLon">???</span>°
</p>
<p>
Current Location (lat, lon):<br/>
<span id="currentLat">???</span>°, <span id="currentLon">???</span>°
</p>
<p>
Distance from starting location:<br/>
<span id="distance">0</span> km
</p>
</div>

En los próximos pasos, se usará la API de Geolocation para propagar todos esos tramos vacíos.

Paso 3: Cómo determinar la ubicación actual del usuario

getCurrentPosition() informará de forma asíncrona sobre la ubicación actual del usuario. Llámala en cuanto se cargue la página para que se propague correctamente la posición inicial y se guarde para más adelante:

window.onload = function() {
var startPos;
navigator.geolocation.getCurrentPosition(function(position) {
startPos = position;
document.getElementById('startLat').innerHTML = startPos.coords.latitude;
document.getElementById('startLon').innerHTML = startPos.coords.longitude;
});
};

Si es la primera vez que una aplicación de este dominio solicita permisos, el navegador suele verificar el consentimiento del usuario. Según el navegador, es posible que también haya preferencias para permitir o denegar siempre las búsquedas de permisos, en cuyo caso se omitirá el proceso de confirmación.

Después de ejecutar este código, deberías poder ver la posición inicial. Según el dispositivo de ubicación que use tu navegador, el objeto de posición podría contener mucho más que solo latitud y longitud, p.ej., podría incluir una altitud o una dirección. Para explorar más, registra la variable de posición en la consola.

Paso 4: Cómo controlar los errores

Lamentablemente, no todas las búsquedas de ubicación se realizan correctamente. Es posible que no se haya podido encontrar un GPS o que el usuario haya inhabilitado repentinamente las búsquedas de ubicación. Se llamará a un segundo argumento opcional a getCurrentPosition() en caso de error para que puedas notificar al usuario dentro de la devolución de llamada:

window.onload = function() {
var startPos;
navigator.geolocation.getCurrentPosition(function(position) {
// same as above
}, function(error) {
alert('Error occurred. Error code: ' + error.code);
// error.code can be:
//   0: unknown error
//   1: permission denied
//   2: position unavailable (error response from locaton provider)
//   3: timed out
});
};

Paso 5: Cómo supervisar la ubicación del usuario

La llamada anterior a getCurrentPosition() solo se ejecutó una vez, cuando se cargó la página. Para hacer un seguimiento de los cambios, usa watchPosition(). Notificará automáticamente una función de devolución de llamada cada vez que el usuario se mueva:

navigator.geolocation.watchPosition(function(position) {
document.getElementById('currentLat').innerHTML = position.coords.latitude;
document.getElementById('currentLon').innerHTML = position.coords.longitude;
});

Paso 6: Mostrar distancia recorrida

Este paso no está directamente relacionado con la API de Geolocation, pero completa la demostración y proporciona un ejemplo de cómo podrías usar los datos de ubicación. Agrega una línea adicional al controlador watchPosition() para propagar la distancia recorrida:

navigator.geolocation.watchPosition(function(position) {
// same as above
document.getElementById('distance').innerHTML =
    calculateDistance(startPos.coords.latitude, startPos.coords.longitude,
                    position.coords.latitude, position.coords.longitude);
});

La función calculateDistance() realiza un algoritmo geométrico para determinar la distancia entre dos coordenadas. La implementación de JavaScript se adaptó de una secuencia de comandos proporcionada por Moveable Type con una licencia de Creative Commons:

function calculateDistance(lat1, lon1, lat2, lon2) {
var R = 6371; // km
var dLat = (lat2 - lat1).toRad();
var dLon = (lon2 - lon1).toRad();
var a = Math.sin(dLat / 2) * Math.sin(dLat / 2) +
        Math.cos(lat1.toRad()) * Math.cos(lat2.toRad()) *
        Math.sin(dLon / 2) * Math.sin(dLon / 2);
var c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
var d = R * c;
return d;
}
Number.prototype.toRad = function() {
return this * Math.PI / 180;
}