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

About ElaineCRO

Graduada em Sistemas de Informação. Programadora, apaixonada pela minha profissão, doida por forró e pelas pessoas que me dão valor. \o/

One response to “Html5 e Geolocalização”

  1. Eder says :

    boa tarde estou fazendo um trabalho, com a api do google, mas me diz uma coisa , eu testo esse script e ele me mostra uma latitude e longitude , um pouco distande de onde eu acesso, tem alguma diferença em relação aos browsers ou a pagina é redirecionada do local do acesso…, ai tenho que pegar ip, cidade, estado outros campos pra fazer isso correto? obrigado

Deixe um comentário

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair / Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair / Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair / Alterar )

Foto do Google+

Você está comentando utilizando sua conta Google+. Sair / Alterar )

Conectando a %s

%d blogueiros gostam disto: