Introdução
A API Geolocation permite que você descubra onde o usuário está e acompanhe a movimentação dele, sempre com a permissão do usuário. Essa funcionalidade pode ser usada como parte das consultas do usuário, por exemplo, para orientar alguém até um ponto de destino. Também pode ser usada para marcar geograficamente algum conteúdo que o usuário tenha criado, por exemplo, para marcar onde uma foto foi tirada. A API é independente de dispositivo. Ela não se importa como o navegador determina o local, contanto que os clientes possam solicitar e receber dados de local de maneira padrão. O mecanismo subjacente pode ser via GPS, Wi-Fi ou simplesmente pedindo ao usuário para inserir sua localização manualmente. Como qualquer uma dessas pesquisas levará algum tempo, a API é assíncrona; você transmite a ela um método de callback sempre que solicita um local.
O exemplo abaixo é um medidor de viagem que mostra a localização inicial e mantém a distância percorrida desde que a página foi carregada.
Etapa 1. Verificar a compatibilidade
Você pode verificar facilmente a compatibilidade testando a presença do objeto Geolocation:
// 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á construindo 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 gerar relatórios assíncronos sobre a localização atual do usuário. Chame-a assim que a página carregar, 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 esta for a primeira vez que um aplicativo neste domínio solicita permissões, o navegador normalmente verificará o consentimento do usuário. Dependendo do navegador, também pode haver preferências para sempre permitir ou proibir pesquisas de permissão. Nesse caso, o processo de confirmação será ignorado.
Depois de executar esse código, você vai encontrar a posição inicial. Dependendo do dispositivo de localização usado pelo navegador, o objeto de posição pode conter muito mais do que apenas latitude e longitude, por exemplo, incluir uma altitude ou uma direção. Você pode investigar mais 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 possa ser localizado ou
o usuário tenha desabilitado as pesquisas de localização de repente. Um segundo argumento opcional para getCurrentPosition()
será chamado no caso de um erro. Assim, você pode 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 da página. Para acompanhar as mudanças,
use watchPosition(). Ele notificará automaticamente uma função de callback sempre que o usuário fizer o movimento:
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 você pode usar os 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 (link em inglês):
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;
}