Geolocalização HTML5

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

Experimente pessoalmente: mostre sua posição no Google Maps

Localizar a posição do usuário

A API de Geolocalização do HTML5 é usada 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 posição do usuário.

O exemplo a seguir é um exemplo simples de geolocalização que pode retornar 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 não é suportada por este navegador.";}
  }
function showPosition(position)
  {
  x.innerHTML="Latitude: " + position.coords.latitude +
  "<br />LongITUDE: " + position.coords.longitude;
  }
</script>

Experimente pessoalmente

Explicação do exemplo:

  • Detectar se o geolocalização é suportada
  • Se suportado, execute o método getCurrentPosition(). Se não suportado, mostre uma mensagem para o usuário.
  • Se getCurrentPosition() executar com sucesso, retorna um objeto coordinates para a função especificada no parâmetro showPosition
  • A função showPosition() obtém e exibe a latitude e 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 especifica 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 o pedido 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

Displaying Results on a 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 options for markers, zoom, and drag.

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 In-car 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 also return other attributes below.

Attribute Description
coords.latitude Decimal degree latitude
coords.longitude Decimal degree longitude
coords.accuracy Location accuracy
coords.altitude Altitude, measured in meters above sea level
coords.altitudeAccuracy Precisão altimétrica da localização
coords.heading Direção, a partir do norte verdadeiro 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 não é suportada por este navegador.";}
  }
function showPosition(position)
  {
  x.innerHTML="Latitude: " + position.coords.latitude +
  "<br />LongITUDE: " + position.coords.longitude;
  }
</script>

Experimente pessoalmente