tutoriais mais recente desenvolvimento web

HTML5 Geolocation


A API HTML Geolocation é usado para localizar a posição de um usuário.


O que é W3C Geolocation API?

A API W3C Geolocation é um esforço do World Wide Web Consortium (W3C) para padronizar uma interface para recuperar as informações de localização geográfica para um dispositivo do lado do cliente.

Ele define um conjunto de objetos, compatível com padrão ECMAScript, que executar no aplicativo cliente dar a localização do dispositivo do cliente através da consulta de servidores de localização de informação, que são transparentes para a interface de programação de aplicações (API).

As fontes mais comuns de informações de localização são o endereço IP, Wi-Fi e Bluetooth endereço MAC, identificação por radiofrequência (RFID), local da conexão Wi-Fi, ou dispositivo de Sistema de Posicionamento Global (GPS) e IDs celulares GSM / CDMA.

A localização é devolvido com uma determinada precisão, dependendo a melhor fonte de informação local disponível.


Implantação em navegadores web

páginas da Web pode usar a API de Geolocalização diretamente se o navegador da Web implementa. Historicamente, alguns navegadores poderia ganhar apoio via o plugin Google Gears, mas este foi interrompido em 2010 e a API do lado do servidor que dependia parou de responder, em 2012.

A API de Geolocalização é ideal para aplicações web para dispositivos móveis, como assistentes pessoais digitais (PDAs) e smartphones. Em computadores, o W3C Geolocation API funciona no Firefox desde a versão 3.5, Google Chrome, Opera 10.6, Internet Explorer 9.0 e Safari 5. Em dispositivos móveis, ele funciona em Android (firmware 2.0+), iOS, Windows Phone e Maemo.

A API W3C Geolocation é também apoiada pela Opera Mobile 10.1 - disponível para Android e Symbian dispositivos (gerações S60 3 e 5) desde 24 November, 2010.

Google Gears forneceu apoio de geolocalização para navegadores mais antigos e não compatíveis, incluindo o Internet Explorer 7.0+ como um plug-in Gears, e Google Chrome que implementou Engrenagens nativamente. Também apoiou geolocalização em dispositivos móveis como um plugin para o navegador Android (pré versão 2.0) e Opera Mobile para Windows Mobile.

No entanto, a API Google Gears Geolocation é incompatível com a API W3C Geolocation e já não é suportado.


Características

O resultado de API de Geolocalização W3C normalmente irá dar 4 propriedades de localização, incluindo latitude e longitude (coordenadas), altura (altura), e [precisão da posição recolhida], que todos dependem das fontes de localização.

Em algumas consultas, altitude pode ceder ou devolver nenhum valor.


Localizar a posição do Usuário

A API HTML Geolocation é usado para obter a posição geográfica de um usuário.

Pois isso pode comprometer a privacidade, a posição não está disponível a menos que o usuário aprove.


Suporte navegador

Os números na tabela especificar a primeira versão do navegador que suporta totalmente Geolocation.

API
Geolocation 5 9 3,5 5 16,0

Note: Geolocation é muito mais preciso para dispositivos com GPS, como iPhone .


Usando Geolocalização HTML

O getCurrentPosition() método é usado para obter a posição do usuário.

O exemplo abaixo retorna a latitude e longitude da posição do utilizador:

Exemplo

<script>
var x = document.getElementById("demo");
function getLocation() {
    if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(showPosition);
    } else {
        x.innerHTML = "Geolocation is not supported by this browser.";
    }
}
function showPosition(position) {
    x.innerHTML = "Latitude: " + position.coords.latitude +
    "<br>Longitude: " + position.coords.longitude;
}
</script>
Tente você mesmo "

Exemplo explicado:

  • Verifique se Geolocation é suportada
  • Se for suportado, executar o getCurrentPosition() método. Se não, exibir uma mensagem para o usuário
  • Se o getCurrentPosition() método é bem sucedido, ele retorna um coordenadas opor-se a função especificada no parâmetro (showPosition)
  • O showPosition() função gera a latitude e longitude

O exemplo acima é um script muito básico Geolocation, sem tratamento de erros.


Tratamento de erros e rejeições

O segundo parâmetro do getCurrentPosition() método é usado para tratar erros. Ele especifica uma função a ser executada se não conseguir obter a localização do usuário:

Exemplo

function showError(error) {
    switch(error.code) {
        case error.PERMISSION_DENIED:
            x.innerHTML = "User denied the request for Geolocation."
            break;
        case error.POSITION_UNAVAILABLE:
            x.innerHTML = "Location information is unavailable."
            break;
        case error.TIMEOUT:
            x.innerHTML = "The request to get user location timed out."
            break;
        case error.UNKNOWN_ERROR:
            x.innerHTML = "An unknown error occurred."
            break;
    }
}
Tente você mesmo "

Exibindo o resultado em um mapa

Para exibir o resultado em um mapa, você precisa ter acesso a um serviço de mapas, como o Google Maps.

No exemplo abaixo, a latitude e longitude retornado é usado para mostrar a localização em um mapa do Google (using a static image) :

Exemplo

function showPosition(position) {
    var latlon = position.coords.latitude + "," + position.coords.longitude;

    var img_url = "http://maps.googleapis.com/maps/api/staticmap?center=
    "+latlon+"&zoom=14&size=400x300&sensor=false";

    document.getElementById("mapholder").innerHTML = "<img src='"+img_url+"'>";
}
Tente você mesmo "

Google Map Script
Como mostrar um mapa do Google interativo com um marcador, zoom e opções de arrasto.


Informações específicas do local

Esta página demonstrou como para mostrar a posição de um usuário em um mapa.

Geolocation também é muito útil para informações específicas do local, como:

  • Up-to-date informações locais
  • Mostrando Pontos de interesse perto do usuário
  • Turn-by-turn de navegação (GPS)

O getCurrentPosition() Método - O Retorno de dados

O getCurrentPosition() método devolve um objecto, se for bem sucedido. As propriedades latitude, longitude e precisão são sempre devolvidos. As outras propriedades são devolvidos se disponíveis:

Propriedade Devoluções
coords.latitude A latitude como um número decimal
coords.longitude A longitude como um número decimal
coords.accuracy A precisão da posição
coords.altitude A altitude em metros acima do nível médio do mar
coords.altitudeAccuracy A precisão altitude de posição
coords.heading O título como graus no sentido horário a partir do Norte
coords.speed A velocidade em metros por segundo
timestamp A data / hora da resposta

Geolocation objeto - Outros métodos interessantes

watchPosition() - Retorna a posição atual do usuário e continua a retornar posição atualizada conforme o usuário se move (like the GPS in a car) .

clearWatch() - Pára o watchPosition() método.

O exemplo abaixo demonstra a watchPosition() método. Você precisa de um dispositivo GPS precisa de testar isso (like iPhone ) :

Exemplo

<script>
var x = document.getElementById("demo");
function getLocation() {
    if (navigator.geolocation) {
        navigator.geolocation.watchPosition(showPosition);
    } else {
        x.innerHTML = "Geolocation is not supported by this browser.";
    }
}
function showPosition(position) {
    x.innerHTML = "Latitude: " + position.coords.latitude +
    "<br>Longitude: " + position.coords.longitude;
}
</script>
Tente você mesmo "