Geolocalização com HTML 5
Com os dispositivos móveis tomando conta do mercado, se faz necessário para vários tipos de aplicações saberem qual a posição do usuário para fornecer informações mais personalizadas e relevante. Com o HTML5 foi introduzido a possibilidade de pegar a posição GPS do usuário que pode ser feito de maneira muito fácil.
function getLocation(){
var saida = document.getElementById("saida");
if( navigator.geolocation ){
navigator.geolocation.getCurrentPosition(function(position){
lat = position.coords.latitude;
lng = position.coords.longitude;
saida.innerHTML = "Latitude: "+lat+" - Longitude: "+lng;
});
}else{
saida.innerHTML = "Geolocalização não é suportado por este navegador!";
}
}
Veja exemplo simples de Geolocalização
Na linha 3 simplesmente pegamos um elemento HTML para realizar a saída para o usuário.
Na linha 4 realizamos um teste para saber se o navegador possui suporte ao recurso de geolocalização, senão mostramos a devida mensagem no else do teste.
Na linha 5 chamamos o método getCurrentPosition
do objeto navigator.geolocation
que recebe como parâmetro uma função que será chamada quando a posição de GPS for obtida sendo os dados passado em seu parâmetro position
.
Nas linhas 6 e 7, pegamos os valores de latitude e longitude do objeto position que recebemos e na próxima linha exibimos este resultado para o usuário.
Agora vamos examinar os possíveis erros que podem ocorrer.
function getLocation(){
var saida = document.getElementById("saida");
if( navigator.geolocation ){
navigator.geolocation.getCurrentPosition( showSucesso , showErro);
}else{
saida.innerHTML = "Geolocalização não é suportado por este navegador!";
}
}
...
function showErro(erro){
var saida = document.getElementById("saida");
switch( erro.code ){
case erro.PERMISSION_DENIED:
saida.innerHTML = "O usuário negou o pedido de Geolocalização";
break;
case erro.POSITION_UNAVAILABLE:
saida.innerHTML = "A posição não está disponível";
break;
case erro.TIMEOUT:
saida.innerHTML = "O pedido para obter a localização do usuário expirou";
break;
case erro.UNKNOWN_ERROR:
saida.innerHTML = "Um erro desconhecido ocorreu";
break;
}
}
Veja exemplo com tratamento de erros
Como vemos na linha 5, agora o método getCurrentPosition
recebe duas funções como parâmetro, a primeira será executada se for possível obter uma posição e a segunda caso não seja, passando um objeto de erro para ela. Na linha 13 temos a nossa implementação do método de erro showErro
que recebe o objeto erro, que entre seus atributos possui o código de erro, que podemos através de um switch
na linha 16 comparar com as constantes PERMISSION_DENIED
, POSITION_UNAVAILABLE
, TIMEOUT
e UNKNOWN_ERROR
que as suas descrição já se encontram no código.
Voltando um pouco para o objeto de position
possui mais informações além de latitude e longitude conforme tabela abaixo:
Propriedade | Retorno |
coords.latitude | A latitude como um número decimal |
coords.longitude | A longitude como um número decimal |
coords.accuracy | Retorna a precisão aproximada do ponto em metros. |
coords.altitude | Retorna a altitude em metros se disponível |
coords.altitudeAccuracy | Retorna a precisão aproximada da altura em metros |
coords.heading | Graus em sentido do norte verdadeiro |
coords.speed | Retorna a velocidade de deslocamento em metros se disponível |
timestamp | A data e hora da resposta |
function showSucesso(position){
var saida = document.getElementById("saida");
saida.innerHTML += "<p>Latitude: "+position.coords.latitude+"</p>"
saida.innerHTML += "<p>Longitude: "+position.coords.longitude+"</p>";
saida.innerHTML += "<p>Accuracy: "+position.coords.accuracy+"</p>";
saida.innerHTML += "<p>AltitudeAccuracy: "+position.coords.altitudeAccuracy+"</p>";
saida.innerHTML += "<p>Heading: "+position.coords.heading+"</p>";
saida.innerHTML += "<p>Speed: "+position.coords.speed+"</p>";
saida.innerHTML += "<p>Timestamp: "+position.timestamp+"</p>";
}
Veja exemplo
Algo que podemos fazer com as informações que obtemos é utilizar a API do Google Maps para gerar uma imagem estática por exemplo, marcando onde o usuário está.
function showSucesso(position) {
var latlon = position.coords.latitude + "," + position.coords.longitude;
var marker = "color:blue%7C"+latlon;
var img_url = "http://maps.googleapis.com/maps/api/staticmap?maptype=satellite¢er="+latlon+"&markers="+marker+"&zoom=14&size=400x300&sensor=false";
document.getElementById("saida").innerHTML = "<img src='"+img_url+"'>";
}
O método não é muito diferente, neste caso é só construir uma URL para o serviço de Mapas estático http://maps.googleapis.com/maps/api/staticmap com os parâmetros:
- maptype: tipo de mapa
- center: posição em que o mapa irá ser ser centralizado
- markers: marcadores que serão adicionados no mapa, formados por color:%7C<posição> zoom: nível de zoom, 1 para o minimo e entre 16 e 20 para máximo dependendo da região
- size: tamanho da imagem a ser gerada
Para maiores detalhes de parâmetros consulte a documentação do Google maps .
OBSERVAÇÃO IMPORTANTE: Em navegadores desktop os métodos podem não funcionar gerando o o erro no console do “getCurrentPosition() and watchPosition() are deprecated on insecure origins
.” pois atualmente é exigido que os métodos que forneçam informações sensíveis devem ser feitos por HTTPS. Mas testei no navegador mobile e os códigos funcionaram sem HTTPS.
Bom era isso T++