Geolocalização HTML5

HTML5 Geolocation (geolocalização) é usado para localizar a posição do usuário.

Experimente você mesmo: mostre sua localização no Google Maps

Localizar a posição do usuário

O API de Geolocalização do HTML5 é usado para obter a localização geográfica do usuário.

Devido a essa característica poder violar a privacidade do usuário, a informação de localização do usuário não está disponível, a menos que o usuário concorde.

Suporte do navegador

Internet Explorer 9, Firefox, Chrome, Safari e Opera suportam geolocalização.

Nota:Para dispositivos com GPS, como o iPhone, a geolocalização é mais precisa.

HTML5 - Uso de geolocalização

Use o método getCurrentPosition() para obter a localização do usuário.

O exemplo a seguir é um exemplo simples de geolocalização que pode retornar a latitude e a longitude da localizaçã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>

Experimente pessoalmente

Explicação do exemplo:

  • Detectar se há suporte para geolocalização
  • Se suportado, execute o método getCurrentPosition(). Se não for suportado, mostre uma mensagem ao usuário.
  • Se getCurrentPosition() executar com sucesso, um objeto coordinates é retornado para a função especificada no parâmetro showPosition
  • A função showPosition() obtém e exibe a latitude e a longitude

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

Tratar erros e recusas

O segundo parâmetro do método getCurrentPosition() é usado para lidar com erros. Ele define a função a ser executada quando a obtenção da localização do usuário falhar:

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="Informação de localização não disponível."
      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;
    }
  }

Experimente pessoalmente

Error code:

  • Permission denied - User does not allow geolocation
  • Position unavailable - Unable to obtain current location
  • Timeout - Operation timed out

Display results on map

To display the results on a map, you need to access a map service that can use latitude and longitude, such as Google Maps or Baidu Maps:

Exemplo

function showPosition(position)
{
var latlon=position.coords.latitude+","+position.coords.longitude;
var img_url="http://maps.googleapis.com/maps/api/staticmap?center="
+latlon+"&zoom=14&size=400x300&sensor=false";
document.getElementById("mapholder").innerHTML="<img src='"+img_url+"' />";
}

Experimente pessoalmente

In the example above, we use the returned latitude and longitude data to display the location on Google Maps (using a static image).

Google Maps script

The link above shows you how to use a script to display an interactive map with markers, zoom, and drag options.

Information about a given location

This page demonstrates how to display the user's location on a map. However, geolocation is also very useful for information about a given location.

Example:

  • Update local information
  • Display points of interest around the user
  • Interactive vehicle-based navigation system (GPS)

getCurrentPosition() method - Return data

If successful, the getCurrentPosition() method returns an object. It will always return latitude, longitude, and accuracy attributes. If available, it will return other attributes below.

Attribute Description
coords.latitude Decimal degree latitude
coords.longitude Decimal degree longitude
coords.accuracy Location accuracy
coords.altitude Altitude, above sea level in meters
coords.altitudeAccuracy Precisão altimétrica da localização
coords.heading Direção, a partir do norte, em graus
coords.speed Velocidade, em metros por segundo
timestamp Data e hora da resposta

Objeto Geolocation - Outros métodos interessantes

watchPosition() - Retorna a localização atual do usuário e continua retornando atualizações de localização do usuário ao se mover (como um GPS em um carro).

clearWatch() - Parar o método watchPosition()

O exemplo a seguir mostra o método watchPosition(). Você precisa de um dispositivo GPS preciso para testar este exemplo (por exemplo, iPhone):

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>

Experimente pessoalmente