API de geolocalização da Web
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.
Nota: A geolocalização é mais precisa para dispositivos com GPS, como smartphone.
A API de geolocalização é compatível com todos os navegadores:
| Yes | Yes | Yes | Yes | Yes |
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 a API de geolocalização
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>
const 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;
}
}
Exibindo o resultado em um mapa
Para exibir o resultado em um mapa, você precisa acessar um serviço de mapas, como o Google Maps.
No exemplo abaixo, a latitude e a longitude retornadas são usadas para mostrar a localização em um mapa do Google (usando uma imagem estática):
Exemplo
function showPosition(position) {
let latlon = position.coords.latitude + "," + position.coords.longitude;
let img_url = "https://maps.googleapis.com/maps/api/staticmap?center=
"+latlon+"&zoom=14&size=400x300&sensor=false&key=YOUR_KEY";
document.getElementById("mapholder").innerHTML = "<img src='"+img_url+"'>";
}
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>
const 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>