API de Geolocalização Web

Localizar a posição do usuário

A API de Geolocalização HTML é usada para obter a localização do usuário.

Devido ao potencial dano à privacidade, a localização não está disponível a menos que o usuário concorde.

Experimente Pessoalmente

Notas:A geolocalização é mais precisa para dispositivos com GPS (como smartphones).

Todos os navegadores suportam o API de Geolocalização:

Chrome IE Firefox Safari Opera
Suporte Suporte Suporte Suporte Suporte

Notas:A partir do Chrome 50, o API de Geolocalização será aplicável apenas em contextos seguros, como HTTPS. Se seu site estiver hospedado em uma fonte não segura (por exemplo, HTTP), a solicitação para obter a localização do usuário não funcionará mais.

Usar o API de Geolocalização

getCurrentPosition() O método é usado para retornar a localização do usuário.

O exemplo a seguir retorna a latitude e a longitude da localização do usuário:

Exemplo

<script>
const x = document.getElementById("demo");
function getLocation() {
  if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(showPosition);
  } else {
    x.innerHTML = "Geolocalização não é suportada por este navegador.";
  }
}
function showPosition(position) {
  x.innerHTML = "LATITUDE: " + position.coords.latitude +
  "LongITUDE: " + position.coords.longitude;
}
</script>

Experimente Pessoalmente

Explicação do exemplo:

  1. Verifique se o Geolocation é suportado
  2. Se suportado, execute o método getCurrentPosition(). Se não, exiba uma mensagem para o usuário
  3. Se o método getCurrentPosition() for bem-sucedido, ele retornará um objeto coordinates para a função especificada no parâmetro (showPosition)
  4. A função showPosition() exibe a latitude e a longitude

O exemplo acima é um script básico de geolocalização, sem tratamento de erros.

Lidar com erros e recusas

getCurrentPosition() O segundo parâmetro do método é usado para lidar com erros. Se não for possível obter a localização do usuário, ele especifica a função a ser executada:

Exemplo

function showError(error) {
  switch(error.code) {
    case error.PERMISSION_DENIED:
      x.innerHTML = "O usuário negou a solicitação de Geolocalização.";
      break;
    case error.POSITION_UNAVAILABLE:
      x.innerHTML = "As informações de localização não estão disponíveis.";
      break;
    case error.TIMEOUT:
      x.innerHTML = "A solicitação para obter a localização do usuário expirou.";
      break;
    case error.UNKNOWN_ERROR:
      x.innerHTML = "Ocorreu um erro desconhecido.";
      break;
  }
}

Experimente Pessoalmente

Exibir resultados no mapa

Para exibir os resultados no mapa, você precisa acessar o serviço de mapa, por exemplo, o Google Maps.

Neste exemplo, a latitude e a longitude retornadas são usadas para exibir a localização no Google Maps (usando 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 de localização

Esta página demonstra como exibir a localização do usuário no mapa.

Geolocation também é muito útil para informações específicas de localização, por exemplo:

  • Informações locais mais recentes
  • Exibir pontos de interesse próximos ao usuário
  • Navegação passo a passo (Turn-by-turn navigation) (GPS)

Método getCurrentPosition() - Retornar dados

getCurrentPosition() O método retorna um objeto em caso de sucesso. Sempre retornará os atributos de latitude, longitude e precisão. Se disponível, retornará outros atributos:

Atributos Retornar
coords.latitude Latitude expressa em número decimal (sempre será retornada).
coords.longitude Longitude expressa em número decimal (sempre será retornada).
coords.accuracy Precisão da localização (sempre será retornada).
coords.altitude Altitude acima do nível do mar (em metros) (se disponível, será retornado).
coords.altitudeAccuracy Precisão da altitude da localização (se disponível, será retornado).
coords.heading O ângulo de direção a partir do norte no sentido horário (se disponível, será retornado).
coords.speed Velocidade em metros por segundo (se disponível, será retornado).
timestamp Data e hora da resposta (se disponível, será retornado).

Métodos interessantes do objeto Geolocation

O objeto Geolocation também possui outros métodos interessantes:

  • watchPosition() - Retornar a localização atual do usuário e continuar retornando atualizações de localização conforme o usuário se move (como no GPS de um carro).
  • clearWatch() - Parar o método watchPosition().

Os exemplos a seguir mostram watchPosition() Métodos. Você precisa de um dispositivo GPS preciso para testar (por exemplo, smartphone):

Exemplo

<script>
const x = document.getElementById("demo");
function getLocation() {
  if (navigator.geolocation) {
    navigator.geolocation.watchPosition(showPosition);
  } else {
    x.innerHTML = "Geolocalização não é suportada por este navegador.";
  }
}
function showPosition(position) {
  x.innerHTML = "LATITUDE: " + position.coords.latitude +
  "LongITUDE: " + position.coords.longitude;
}
</script>

Experimente Pessoalmente