Introducción
La API de Geolocation te permite averiguar dónde está el usuario y mantenerte informado mientras se desplaza, siempre con el consentimiento del usuario. Esta funcionalidad podría usarse como parte de las consultas del usuario; p.ej., para guiar a alguien a un punto de destino. También se puede utilizar para "etiquetar geográficamente" contenido creado por el usuario; por ejemplo, para marcar dónde se tomó una foto. La API es independiente del dispositivo. La forma en que el navegador determina la ubicación no es importante, siempre y cuando los clientes puedan solicitar y recibir datos de ubicación de forma estándar. El mecanismo subyacente podría ser a través de GPS, Wi-Fi o simplemente pedirle al usuario que ingrese su ubicación manualmente. Como cualquiera de estas búsquedas llevará tiempo, la API es asíncrona; se usa 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 muestra la ubicación inicial y muestra la distancia recorrida desde que se cargó la página.
Paso 1: Comprueba la compatibilidad
Para verificar fácilmente la compatibilidad, prueba 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: Cómo declarar el HTML del medidor de viaje
En este ejemplo, estás creando un medidor de viaje. Por lo tanto, declara 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: Cómo determinar la ubicación actual del usuario
getCurrentPosition() informará de manera asíncrona la ubicación actual del usuario. Llámala tan pronto como se cargue la página, de modo que se complete correctamente (y se guarde para más adelante) la posición inicial:
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, por lo general, el navegador verificará el consentimiento del usuario. Según el navegador, también puede haber preferencias para permitir (o rechazar) siempre las búsquedas de permisos, en cuyo caso se omitirá el proceso de confirmación.
Una vez que ejecutes este código, deberías poder ver la posición de inicio. Según el dispositivo de ubicación que use tu navegador, el objeto de posición puede contener mucha más información que solo latitud y longitud; p.ej., podría incluir una altitud o una dirección. Puedes registrar la variable de posición en la consola para seguir explorando.
Paso 4: Soluciona errores
Desafortunadamente, no todas las búsquedas de ubicaciones se realizan correctamente. Es posible que no se haya podido ubicar un GPS o que el usuario inhabilite repentinamente las búsquedas de ubicación. Si se produce un error, se llamará a un segundo argumento opcional para getCurrentPosition(), 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 cargaba la página. Para realizar 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, sino que completa la demostración y brinda 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 adapta de una secuencia de comandos proporcionada por Moveable Type bajo 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;
}