Arquivo da tag: gps

HTML5: Geolocalização

4 respostas

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