Tutorial HTML

HTML HOME Introdução HTML Editores de HTML HTML básico Elementos HTML Atributos HTML Títulos HTML Parágrafos HTML Estilos HTML Formatação HTML Cotações HTML Comentários HTML Cores HTML HTML CSS Links HTML Imagens HTML HTML Favicon Tabelas HTML Listas HTML Bloco HTML e Inline Classes HTML Código HTML Iframes HTML JavaScript HTML Caminhos de arquivo HTML Cabeçalho HTML Esquema HTML HTML Responsivo Código de computador HTML Semântica HTML Guia de estilo HTML Entidades HTML Símbolos HTML Emojis HTML Conjunto de caracteres HTML Codificação de URL HTML HTML vs. XHTML

Formulários HTML

Formulários HTML Atributos de formulário HTML Elementos de formulário HTML Tipos de entrada HTML Atributos de entrada HTML Atributos do formulário de entrada HTML

Gráficos HTML

Tela HTML HTML SVG

Mídia HTML

Mídia HTML Vídeo HTML Áudio HTML Plug-ins HTML HTML YouTube

APIs HTML

Geolocalização HTML Arrastar/Soltar HTML Armazenamento Web HTML Trabalhadores da Web HTML HTML SSE

Exemplos HTML

Exemplos HTML Questionário HTML Exercícios HTML Certificado HTML Resumo HTML Acessibilidade HTML

Referências HTML

Lista de tags HTML Atributos HTML Atributos Globais HTML Suporte ao navegador HTML Eventos HTML Cores HTML Tela HTML Áudio/vídeo HTML Tipos de documento HTML Conjuntos de caracteres HTML Codificação de URL HTML Códigos HTML Lang Mensagens HTTP Métodos HTTP PX to EM Converter Atalhos do teclado

API de geolocalização HTML


A API de geolocalização HTML é usada para localizar a posição de um usuário.


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.

Observação: a geolocalização é mais precisa para dispositivos com GPS, como smartphones.


Suporte ao navegador

Os números na tabela especificam a primeira versão do navegador que suporta totalmente a geolocalização.

API
Geolocation 5.0 - 49.0 (http)
50.0 (https)
9.0 3.5 5.0 16.0

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 geolocalização HTML

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>
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>

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;
  }
}

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 o watchPosition()método.

O exemplo abaixo mostra o watchPosition()método. Você precisa de um dispositivo GPS preciso para testar isso (como smartphone):

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>