Arquivo | Geolocalização RSS for this section

Html5 e Geolocalização

Recentemente eu me deparei com a necessidade, de saber a localização de um usuário no momento em que ele está preenchendo uma tela de cadastro. E graças ao HTML5, hoje nós podemos fazer esse tipo de monitoramento.

Primeiro, vamos entender que existem três maneiras do agente de usuário descobrir a nossa posição:

  • Geolocalização IP – essa forma é usada pela maioria dos navegadores nos nossos computadores. Utilizam-se de consultas whois e serviços de localização de IP que permitem determinar a cidade ou a região em que você está.
  • Triangulação GPRS – basicamente para celulares sem GPS ou com GPS desligado. Para estes casos, é possível determinar a sua posição através da triangulação das antenas GPRS mais próximas. Mais preciso do que a Geolocalização IP, consegue mostrar em qual parte do bairro você está.
  • GPS – é a forma de localização mais precisa, com margem de erro de apenas uns 5 metros. Pode ser usada por celulares ou tablets com o GPS ligado.

Pois bem, conhecendo melhor internamente as várias formas de se localizar o nosso usuário. Vamos ao que interessa…. como saber onde ele está enquanto está navegando ou fazendo um cadastro no meu sistema web?

Basicamente, em primeiro lugar precisamos saber se o agente do usuário tem suporte à geolocalização do Html5 e se possuir, eu chamarei o script que busca a geolocalização.

if (navigator.geolocation){
  navigator.geolocation.getCurrentPosition(getPosicao, displayError);
}

Percebam que eu chamei a função ‘getCurrentPosition’ e que ela recebe dois parâmetros (getPosicao e displayError). Esses dois parâmetros, são funções callback.

  • A primeira função recebe um objeto de posicionamento, e é através dele que conseguimos pegar a latitude e longitude da minha localização.
function getPosicao(position){
  lat = position.coords.latitude;
  lon = position.coords.longitude;
  alert('Sua posicao: '+ lat + ' - ' + lon);
 }
  • A segunda função serve para fazer o tratamento de erro. O nosso usuário pode escolher por não compartilhar sua posição, ou qualquer outra coisa pode dar errado na hora de pegar a geolocalização. Cada erro possui um código que vai de 0 a 3. É possível ver os significados dos erros na função abaixo.
function displayError(error) {
  var errors = {
    0: 'Erro Desconhecido',
    1: 'Permissão negada',
    2: 'Posição indisponível',
    3: 'Timeout'
  };
  alert('Ocorreu um erro: ' + errors[error.code]);
}
  • Ainda é possível enviar para a função ‘getCurrentPosition’, um terceiro parâmetro que é um objeto de configuração. Esse objeto não será utilizado neste exemplo, mas ele pode ter três propriedades: enableHighAccuracy (true/false para o modo de alta precisão), timeout (tempo máximo em milissegundos para esperar pela posição), maximumAge (tempo máximo em milissegundos que o navegador pode cachear a posição).

Pronto! Com isso você já consegue pegar a localização do seu usuário. A partir daí você pode exibir essas informações na tela, usar a api do google maps e exibir um mapa, mandar essa informação para algum campo hidden no seu formulário e salvar essa informação no seu banco de dados. Enfim, com essas informações você já pode desenvolver a situação que for necessária.

😉

Anúncios
%d blogueiros gostam disto: