API de geolocalização HTML
A API de geolocalização HTML é usada para localizar a posição de um usuário.
Localize a posição do usuário
A API de geolocalização HTML é usada para obter a posição geográfica de um usuário.
Como isso pode comprometer a privacidade, a posição não está disponível, a menos que o usuário a aprove.
Observação: a geolocalização é mais precisa para dispositivos com GPS, como smartphones.
Suporte ao navegador
Os números na tabela especificam a primeira versão do navegador que suporta totalmente a geolocalização.
API | |||||
---|---|---|---|---|---|
Geolocation | 5.0 - 49.0 (http) 50.0 (https) |
9.0 | 3.5 | 5.0 | 16.0 |
Observação: a partir do Chrome 50, a API de geolocalização funcionará apenas em contextos seguros, como HTTPS. Se seu site estiver hospedado em uma origem não segura (como HTTP), as solicitações para obter a localização dos usuários não funcionarão mais.
Usando geolocalização HTML
O getCurrentPosition()
método é usado para retornar a posição do usuário.
O exemplo abaixo retorna a latitude e longitude da posição do usuário:
Exemplo
<script>
var x = document.getElementById("demo");
function getLocation() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(showPosition);
} else {
x.innerHTML = "Geolocation is not supported by this browser.";
}
}
function showPosition(position) {
x.innerHTML = "Latitude: " + position.coords.latitude +
"<br>Longitude: " + position.coords.longitude;
}
</script>
Exemplo explicado:
- Verifique se a geolocalização é compatível
- Se suportado, execute o método getCurrentPosition(). Caso contrário, exiba uma mensagem para o usuário
- Se o método getCurrentPosition() for bem sucedido, ele retornará um objeto de coordenadas para a função especificada no parâmetro (showPosition)
- A função showPosition() gera a Latitude e a Longitude
O exemplo acima é um script de geolocalização muito básico, sem tratamento de erros.
Lidando com Erros e Rejeições
O segundo parâmetro do getCurrentPosition()
método é usado para tratar erros. Ele especifica uma função a ser executada se não conseguir obter a localização do usuário:
Exemplo
function showError(error) {
switch(error.code) {
case error.PERMISSION_DENIED:
x.innerHTML = "User denied the request for Geolocation."
break;
case error.POSITION_UNAVAILABLE:
x.innerHTML = "Location information is unavailable."
break;
case error.TIMEOUT:
x.innerHTML = "The request to get user location timed out."
break;
case error.UNKNOWN_ERROR:
x.innerHTML = "An unknown error occurred."
break;
}
}
Informações específicas do local
Esta página demonstrou como mostrar a posição de um usuário em um mapa.
A geolocalização também é muito útil para informações específicas do local, como:
- Informações locais atualizadas
- Mostrando pontos de interesse perto do usuário
- Navegação passo a passo (GPS)
O método getCurrentPosition() - Dados de retorno
O getCurrentPosition()
método retorna um objeto em caso de sucesso. As propriedades de latitude, longitude e precisão são sempre retornadas. As outras propriedades são retornadas se disponíveis:
Property | Returns |
---|---|
coords.latitude | The latitude as a decimal number (always returned) |
coords.longitude | The longitude as a decimal number (always returned) |
coords.accuracy | The accuracy of position (always returned) |
coords.altitude | The altitude in meters above the mean sea level (returned if available) |
coords.altitudeAccuracy | The altitude accuracy of position (returned if available) |
coords.heading | The heading as degrees clockwise from North (returned if available) |
coords.speed | The speed in meters per second (returned if available) |
timestamp | The date/time of the response (returned if available) |
Objeto de geolocalização - Outros métodos interessantes
O objeto Geolocation também possui outros métodos interessantes:
watchPosition()
- Retorna a posição atual do usuário e continua a retornar a posição atualizada conforme o usuário se move (como o GPS em um carro).clearWatch()
- Interrompe owatchPosition()
método.
O exemplo abaixo mostra o watchPosition()
método. Você precisa de um dispositivo GPS preciso para testar isso (como smartphone):
Exemplo
<script>
var x = document.getElementById("demo");
function getLocation() {
if (navigator.geolocation) {
navigator.geolocation.watchPosition(showPosition);
} else {
x.innerHTML = "Geolocation is not supported by this browser.";
}
}
function showPosition(position) {
x.innerHTML = "Latitude: " + position.coords.latitude +
"<br>Longitude: " + position.coords.longitude;
}
</script>