Um medidor de viagem simples que usa a API Geolocation

Michael Mahemoff

Introdução

A API Geolocation permite descobrir onde o usuário está e acompanhar os movimentos dele, sempre com o consentimento do usuário. Essa funcionalidade pode ser usada como parte das consultas do usuário, por exemplo, para guiar alguém até um ponto de destino. Ele também pode ser usado para "marcar geograficamente" algum conteúdo criado pelo usuário, por exemplo, para marcar onde uma foto foi tirada. A API é independente de dispositivo, ou seja, não importa como o navegador determina o local, desde que os clientes possam solicitar e receber dados de local de maneira padrão. O mecanismo subjacente pode ser por GPS, Wi-Fi ou simplesmente pedindo que o usuário insira o local manualmente. Como qualquer uma dessas pesquisas vai levar algum tempo, a API é assíncrona. Você transmite um método de callback sempre que solicita um local.

O exemplo aqui é um medidor de viagem que mostra o local inicial e mantém uma exibição da distância percorrida desde que a página foi carregada.

Etapa 1. Verificar a compatibilidade

Browser Support

• 5
• 12
• 3.5
• 5

Source

Para verificar a compatibilidade, teste a presença do objeto de geolocalização:

// 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.');
}

Etapa 2. Declarar o HTML do medidor de viagem

Neste exemplo, você está criando um medidor de viagem. Portanto, declare o seguinte 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>

As próximas etapas vão usar a API Geolocation para preencher todos esses períodos vazios.

Etapa 3. Determinar a localização atual do usuário

getCurrentPosition() vai informar de forma assíncrona a localização atual do usuário. Chame-a assim que o carregamento de página for concluído para que ela preencha corretamente e salve para mais tarde a posição 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;
});
};

Se essa for a primeira vez que um aplicativo nesse domínio solicita permissões, o navegador geralmente vai verificar o consentimento do usuário. Dependendo do navegador, também pode haver preferências para sempre permitir ou não as pesquisas de permissão. Nesse caso, o processo de confirmação será ignorado.

Depois de executar esse código, você vai conseguir ver a posição inicial. Dependendo do dispositivo de localização que seu navegador está usando, o objeto de posição pode conter muito mais do que apenas latitude e longitude, como altitude ou direção. Para saber mais, registre a variável de posição no console.

Etapa 4. Solucionar erros

Infelizmente, nem todas as pesquisas de local são bem-sucedidas. Talvez não seja possível localizar um GPS ou o usuário tenha desativado as pesquisas de localização de repente. Um segundo argumento opcional para getCurrentPosition() será chamado em caso de erro, para que você possa notificar o usuário dentro do callback:

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
});
};

Etapa 5. Monitorar a localização do usuário

A chamada anterior para getCurrentPosition() foi executada apenas uma vez, no carregamento de página. Para acompanhar as mudanças, use watchPosition(). Ela vai notificar automaticamente uma função de callback sempre que o usuário se mover:

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

Etapa 6. Mostrar distância percorrida

Essa etapa não está diretamente relacionada à API Geolocation, mas completa a demonstração e fornece um exemplo de como usar dados de local. Adicione uma linha extra ao gerenciador watchPosition() para preencher a distância percorrida:

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);
});

A função calculateDistance() executa um algoritmo geométrico para determinar a distância entre duas coordenadas. A implementação do JavaScript é adaptada de um script fornecido pela Moveable Type sob uma licença 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;
}