English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
HTML5 Geolocalização (geolocation) é usada para localizar a posição do usuário.
HTML5 O API de Geolocalização é usado para obter a localização do usuário.
Devido a essa característica poder violar a privacidade do usuário, as informações de localização do usuário não estão disponíveis a menos que o usuário concorde.
Internet Explorer 9+, Firefox, Chrome, Safari e Opera suportam Geolocalização (geolocation).
Atenção: A geolocalização (geolocation) é mais precisa para dispositivos com GPS, como iPhone.
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:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Base Tutorial Website(oldtoolbag.com)</>title>
</>head>
<body>
<p id="demo">Clique no botão para obter suas coordenadas atuais (pode levar um pouco de tempo para obter):</>p>
<button onclick="getLocation()">Clique em mim</button>
<script>
var x=document.getElementById("demo");
function getLocation()
{
if (navigator.geolocation)
{
navigator.geolocation.getCurrentPosition(showPosition);
}
else
{
x.innerHTML="Este navegador não suporta obter a localização geográfica.";
}
}
function showPosition(position)
{
x.innerHTML="Latitude: " + position.coords.latitude +
"<br>Longitude: " + position.coords.longitude;
}
</script>
</body>
</html>Teste Veja ‹/›Análise do exemplo:
Detectar se a geolocalização é suportada
Se suportado, execute o método getCurrentPosition(). Se não for suportado, exiba uma mensagem para o 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.
O segundo parâmetro do método getCurrentPosition() é usado para lidar com erros. Ele especifica a função que será executada quando a obtenção da localização do usuário falhar:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Tutorial Básico(oldtoolbag.com)</>title>
</>head>
<body>
<p id="demo">Clique no botão para obter suas coordenadas atuais (pode levar um pouco de tempo para obter):</>p>
<button onclick="getLocation()">Clique em mim</button>
<script>
var x=document.getElementById("demo");
function getLocation()
{
if (navigator.geolocation)
{
navigator.geolocation.getCurrentPosition(showPosition,showError);
}
else
{
x.innerHTML="Este navegador não suporta geolocalização.";
}
}
function showPosition(position)
{
x.innerHTML="Latitude: " + position.coords.latitude +
"<br>Longitude: " + position.coords.longitude;
}
function showError(error)
{
switch(error.code)
{
case error.PERMISSION_DENIED:
x.innerHTML="O usuário recusou a solicitação de geolocalização.";
break;
case error.POSITION_UNAVAILABLE:
x.innerHTML="A informação de localização não está disponível.";
break;
case error.TIMEOUT:
x.innerHTML="Solicitação de geolocalização do usuário expirou."
break;
case error.UNKNOWN_ERROR:
x.innerHTML="Erro desconhecido."
break;
}
}
</script>
</body>
</html>Teste Veja ‹/›Código de erro:
Permissão negada - O usuário não permitiu a geolocalização
Localização não disponível - Não foi possível obter a localização atual
Timeout - Tempo de operação excedido
Para exibir os resultados no mapa, você precisa acessar um serviço de mapas que suporte coordenadas de latitude e longitude, como o Google Maps ou o Baidu Maps:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Tutorial Básico(oldtoolbag.com)</>title>
</>head>
<body>
<p id="demo">Clique no botão para obter suas coordenadas atuais (pode levar um pouco de tempo para obter):</>p>
<button onclick="getLocation()">Clique em mim</button>
<div id="mapholder"></div>
<script>
var x=document.getElementById("demo");
function getLocation()
{
if (navigator.geolocation)
{
navigator.geolocation.getCurrentPosition(showPosition,showError);
}
else
{
x.innerHTML="Este navegador não suporta obter a localização geográfica.";
}
}
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+"'>";
}
function showError(error)
{
switch(error.code)
{
case error.PERMISSION_DENIED:
x.innerHTML="O usuário recusou a solicitação de geolocalização.";
break;
case error.POSITION_UNAVAILABLE:
x.innerHTML="A informação de localização não está disponível.";
break;
case error.TIMEOUT:
x.innerHTML="Solicitação de geolocalização do usuário expirou."
break;
case error.UNKNOWN_ERROR:
x.innerHTML="Erro desconhecido."
break;
}
}
</script>
</body>
</html>Teste Veja ‹/›No exemplo anterior, usamos os dados de latitude e longitude retornados para exibir a localização no Google Maps (usando imagens estáticas).
Script do Google Maps
Os links acima demonstram como usar scripts para exibir mapas interativos com opções de marcadores, zoom e arrastar.
Esta página demonstra como exibir a localização do usuário no mapa. No entanto, a geolocalização também é muito útil para informações de localização específicas.
Exemplo:
Atualizar informações locais
Exibir pontos de interesse ao redor do usuário
Sistema de navegação veicular interativa (GPS)
Se bem-sucedido, o método getCurrentPosition() retorna um objeto. Sempre retorna os atributos latitude, longitude e accuracy. Se disponível, retornará outros atributos abaixo.
| Atributo | Descrição |
| coords.latitude | Latitude em número decimal |
| coords.longitude | Longitude em número decimal |
| coords.accuracy | Precisão da localização |
| coords.altitude | Altitude, em metros acima do nível do mar |
| coords.altitudeAccuracy | Precisão altimétrica da localização |
| coords.heading | Direção, começando do Norte |
| coords.speed | Velocidade, em metros/Cada segundo |
| timestamp | Data da resposta/Tempo |
watchPosition() - Retornar a localização atual do usuário e continuar retornando atualizações de localização enquanto o usuário se move (como um GPS em um carro).
clearWatch() - Parar o método watchPosition()
O exemplo a seguir mostra o método watchPosition(). Você precisará de um dispositivo GPS preciso para testar este exemplo (por exemplo, iPhone):
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Tutorial Básico(oldtoolbag.com)</>title>
</>head>
<body>
<p id="demo">Clique no botão para obter suas coordenadas atuais (pode levar um pouco de tempo para obter):</>p>
<button onclick="getLocation()">Clique em mim</button>
<script>
var x=document.getElementById("demo");
function getLocation()
{
if (navigator.geolocation)
{
navigator.geolocation.watchPosition(showPosition);
}
else
{
x.innerHTML="Este navegador não suporta obter a localização geográfica.";
}
}
function showPosition(position)
{
x.innerHTML="Latitude: " + position.coords.latitude +
"<br>Longitude: " + position.coords.longitude;
}
</script>
</body>
</html>Teste Veja ‹/›