Está perdido? Geolocalização!

No passado a localização dos usuários era baseada em IP. A precisão não era lá grande coisa, pois a posição do usuário era baseada em um “chute” de acordo com o seu IP. Graças ao HTML5 e sua API de Geolocalização ou Geolocation (já falamos sobre isso aqui no artigo Creme de papaia e Geolocalização) podemos

No passado a localização dos usuários era baseada em IP. A precisão não era lá grande coisa, pois a posição do usuário era baseada em um “chute” de acordo com o seu IP. Graças ao HTML5 e sua API de Geolocalização ou Geolocation (já falamos sobre isso aqui no artigo Creme de papaia e Geolocalização) podemos saber a posição do usuário de forma muito mais precisa e com isso é possível escrever aplicações mais úteis.

Suporte a geolocalização

Antes de colocar a mão na massa é importante saber os browsers que dão suporte a essa API:

  • Internet Explorer 9 ou superior
  • Firefox 3.5 ou superior
  • Safari 5.0 ou superior
  • Chrome 7.0 ou superior
  • Opera 10.6 ou superior
  • Safari (iOS) 3.2 ou superior
  • Andriod (browser padrão do SO) 2.1 ou superior

Criando uma aplicação

Um exemplo de aplicação dessa API pode ser um site ou uma web app de uma empresa de guincho para carro ou auto socorro.

Vamos imaginar que o dono dessa empresa quer saber a localização dos seu clientes. Com essa informação em mão ele pode informar inicialmente o cliente se ele atende ou não a região que o cliente se localiza.

Etapas ou fluxo da aplicação

  1. O cliente acessa o site da empresa de guincho através de seu smartphone (que permita a geolocalização).
  2. O site obtém a posição do usuário.
  3. O site verifica se o cliente está em uma região atendida e caso positivo informa ao cliente o preço do serviço.

Primeiro passo – Pegando a posição do usuários

Nosso primeiro trecho de código é bem simples: pegamos a posição de latitude e longitude e mostramos essa informação no console.

Você pode testá-lo aqui https://jsfiddle.net/pererinha/Mg9T5/.

Primeiro verificamos se o browser do usuário tem suporte a Geolocation. Caso positivo chamamos o método navigator.geolocation.getCurrentPosition e passamos uma função anônima como parâmetro. Se der tudo certo, a API chama essa função anônima e passa para ela um objeto com as coordenadas do usuário. Mas e algo der errado?

Segundo passo – Tratando erros

Agora o nosso código ficará um pouco mais completo, vamos criar uma função que será chamada caso a Geolocalização apresente um erro.

Para testar: https://jsfiddle.net/pererinha/Y49kd/.

Terceiro passo – Juntando tudo

Bom, já deu para entender como funciona o tal do Geolocation. Agora vamos organizar melhor esse código e começar a utilizar os dados da posição do usuário.

Olha como ficou o script final. Para testar https://jsfiddle.net/pererinha/dKSY5/.

Nessa última versão o código já está mais organizado. E também já temos alguns objetos novos. O código está todo documentado e está bem simples de entender.

Temos três objetos:

  • Oficina
  • Localizacao
  • Distancia

Objeto Oficina

Esse objeto contém as informações sobre a oficina e um método que verifica a distância do cliente e o preço do serviço.

Objeto Localizacao

Esse objeto contém as os métodos para trabalharmos com a api de Geolocation, do primeiro e segundo passo.

Objeto Distancia

Esse objeto tem um método importante que é o distanciaEntreDoisPontos esse método calcula a distância entre dois pontos e retorna o valor em kilômetros.

Adaptado dessa formula https://stackoverflow.com/questions/27928/how-do-i-calculate-distance-between-two-latitude-longitude-points.

Conclusão

Isso seria o básico para começar a brincar com essa api tão legal que é o Geolocation.

Dois plugins, para o Chrome, que podem te ajudar bastante.

Em um próximo artigo veremos sobre conseguir a latitude e longitude do usuário a partir de seu endereço e mais alguns parâmetros que podemos utilizar com o método navigator.geolocation.getCurrentPosition.

Deixe um comentário

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *