Com a nova versão do html, é possível acessar a localização geográfica do cliente que acessa uma página. A origem (fonte) dessa localização pode ser o IP, RFID, endereço MAC do WiFi ou bluetooth, IDs de células GSM/CDMA ou, a forma mais precisa, GPS de um smartphone ou tablet. E é bem simples! Vamos para a prática:
Você pode verificar se o browser do cliente tem suporte a geolocalização com o if:
if (navigator.geolocation) { // Tem suporte } else { // Não tem suporte }
Para fazer a leitura das coordenadas e outros dados:
// Se conseguir fazer a leitura, chama a função posicao(). Se não conseguir, chama a função erro() navigator.geolocation.getCurrentPosition(posicao, erro); // Função chamada quando navigator.geolocation.getCurrentPosition CONSEGUE fazer a leitura function posicao(dados) { lat = dados.coords.latitude; // Latitude lon = dados.coords.longitude; // Longitude pre = dados.coords.accuracy; // Precisão em metros alt = dados.coords.altitude; // Altitude em metros preAlt = dados.coords.altitudeAccuracy; // Precisão da altitude em metros dir = dados.coords.heading; // Direção em graus: 0º Norte (geográfico), 90º Leste, 180º Sul, 270º Oeste. vel = dados.coords.speed; // Velocidade em m/s } // Função chamada quando navigator.geolocation.getCurrentPosition NÃO consegue fazer a leitura function erro(dados) { switch (dados.code) { case 1: alert('Você negou o acesso à sua localização!'); break; case 2: alert('Não foi possível acessar sua posição!'); break; case 3: alert('Timeout ao tentar pegar sua localização!'); break; } }
Lembrando que são coordenadas geográficas no formato de graus decimais e não em graus, minutos e segundos. Outra coisa em relação ao formato é que, no lugar de usar N (norte), S (sul), E (leste) e W (oeste), usa-se o sinal – (negativo) para as latitudes ao sul (a baixo) do equador, latitude 0, e as longitudes a oeste (a esquerda) de Greenwich, longitude 0. Pense num plano cartesiano com o Equador como eixo X e Greenwich como eixo Y.
E dá para calcular a distância em linha reta entre dois pontos também! Fica assim:
// Se conseguir fazer a leitura, chama a função posicao(). Se não conseguir, chama a função erro() navigator.geolocation.getCurrentPosition(posicao, erro); // Função chamada quando navigator.geolocation.getCurrentPosition CONSEGUE fazer a leitura function posicao(dados) { // Minhas coordenadas lat = dados.coords.latitude; lon = dados.coords.longitude; // Coordenadas de destino (podem ser informadas pelo usuário, ou vir de um banco de dados, etc) latD = -14.88378; lonD = -40.829145; // Calcula a distância em km considerando a curvatura da terra distancia = 6371 * Math.acos(Math.cos(Math.PI * (90 - latD) / 180) * Math.cos(Math.PI * (90 - lat) / 180) + Math.sin(Math.PI * (90 - latD) / 180) * Math.sin(Math.PI * (90 - lat) / 180) * Math.cos(Math.PI * (lon - lonD) / 180)); alert('Distância: ' + distancia + 'km'); }
Lembrando que a distância calculada leva em conta a curvatura da terra.
Agora um exemplo um pouco mais elaborado com as distâncias de onde o cliente estiver para algumas pizzarias de Vitória da Conquista – BA:
<!DOCTYPE html> <html lang="pt-Br"> <head> <meta charset="utf-8" /> <title>Geolocalização</title> </head> <body> </body> </html>
Aqui pode ser visto um exemplo do funcionamento de distâncias com geolocalização do código acima (sem CSS).