Un medidor de viajes simple que usa la API de Geolocation

Michael Mahemoff

Introducción

La API de Geolocation te permite averiguar dónde se encuentra el usuario y seguirlo mientras se mueve, siempre con su consentimiento. Esta funcionalidad se podría usar como parte de las consultas de los usuarios, p.ej., para guiar a alguien a un punto de destino. También se podría usar para "etiquetar geográficamente" contenido que haya creado el usuario, p.ej., para marcar dónde se tomó una foto. La API es independiente del dispositivo; no importa cómo el navegador determine la ubicación, siempre que 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 pidiéndole al usuario que ingrese su ubicación de forma manual. Dado que cualquiera de estas búsquedas llevará algún tiempo, la API es asíncrona; le pasas un método de devolución de llamada cada vez que solicitas una ubicación.

En este ejemplo, se muestra un medidor de viaje que indica la ubicación inicial y mantiene una visualización de la distancia que recorrió el usuario desde que se cargó la página.

Paso 1: Comprueba la compatibilidad

Browser Support

• 5
• 12
• 3.5
• 5

Source

Puedes comprobar la compatibilidad fácilmente probando 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 viajes

En este ejemplo, crearás un medidor de viajes, 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 completar todos esos intervalos vacíos.

Paso 3: Determina 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 complete correctamente la posición inicial y la 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, también puede haber preferencias para permitir o no permitir 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 la latitud y la longitud, p.ej., podría incluir una altitud o una dirección. Puedes explorar más registrando la variable de posición en la consola.

Paso 4: Soluciona errores

Lamentablemente, no todas las búsquedas de ubicación se realizan correctamente. Tal vez no se pudo encontrar un GPS o el usuario inhabilitó de repente las búsquedas de ubicación. Se llamará a un segundo argumento opcional para getCurrentPosition() en caso de que se produzca un error, de modo 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: Supervisa 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 a 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 la 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 puedes 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() ejecuta un algoritmo geométrico para determinar la distancia entre dos coordenadas. La implementación de JavaScript se adapta a partir de una secuencia de comandos proporcionada por Moveable Type con una licencia 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;
}