Um medidor de percurso simples que usa a API Geolocation

Michael Mahemoff

Introdução

A API Geolocalização 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. Também pode ser usado para "marcar com geolocalização" algum conteúdo criado pelo usuário, por exemplo, para marcar onde uma foto foi tirada. A API não depende do dispositivo. Ela não se importa com a forma como o navegador determina a localização, desde que os clientes possam solicitar e receber dados de localização de maneira padrão. O mecanismo 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ê precisa transmitir um método de callback sempre que solicitar um local.

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

Etapa 1. Verificar a compatibilidade

Browser Support

• 5
• 12
• 3.5
• 5

Source

É possível verificar a compatibilidade com facilidade testando 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 hodômetro. 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 os espaços vazios.

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

getCurrentPosition() vai informar de forma assíncrona o local atual do usuário. Chame-o assim que a página for carregada para que ele preencha corretamente a posição inicial e a salve para depois:

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 esta for a primeira vez que um aplicativo nesse domínio solicitou permissões, o navegador normalmente vai verificar o consentimento do usuário. Dependendo do navegador, também pode haver preferências para sempre permitir ou não permitir 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, por exemplo, ele pode incluir uma altitude ou uma direção. Você pode conferir mais detalhes registrando a variável de posição no console.

Etapa 4. Tratamento de erros

Infelizmente, nem todas as pesquisas de local são bem-sucedidas. Talvez um GPS não tenha sido localizado 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. Assim, você pode notificar o usuário no 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 da página. Para acompanhar as mudanças, use watchPosition(). Ele 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

Esta etapa não está diretamente relacionada à API Geolocation, mas conclui 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 pelo 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;
}