Seu Curso

  • Full Screen
  • Wide Screen
  • Narrow Screen
  • Increase font size
  • Default font size
  • Decrease font size

Obter o endereço automaticamente para uma página web

Imprimir
Avaliação do Usuário: / 2
PiorMelhor 

Hoje em dia muitos sites comportam-se como aplicativos para celular, já que serão utilizados basicamente em dispositivos móveis.

 

E uma grande facilidade para o usuário é que, ao invés de solicitar que ele digite o endereço, você obtenha-o diretamente da localização atual dele. Ok, pode ser que ele queira colocar o endereço da casa dele e não esteja em casa nesse momento, mas imagine que a aplicação seja para, por exemplo, enviar fotos e identificar de onde ela foi tirada. ;)

 

O código abaixo é de uma página completa que consegue acessar os dados de GPS do dispositivo móvel e enviá-los ao Google Maps para obter o endereço a partir da latitude e longitude atual.

 

Note que será preciso dar permissão para que a página possa acessar seus dados de localização.

 

<!DOCTYPE html>
<html>
 <head>
 <title>Pega endereço</title>
 </head>
 <body onload="getLocation()">
 <form action="vai_para_algum_lugar.php" method="post">
 <label class="active" for="endereco">Endereço</label>
 <input type="text" id="endereco" size="999" name="endereco">
 </form>
 </body>
 
 <!-- Script de Endereço -->
 <script>
 function getLocation()
 {
 if (navigator.geolocation) {
 navigator.geolocation.getCurrentPosition(showPosition,showError);
 }
else {
x.innerHTML="Seu browser não suporta Geolocalização.";
}
 function showPosition(position) {
 xmlhttp = new XMLHttpRequest();
 xmlhttp.onreadystatechange = function() {
 if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
 var doc = xmlhttp.responseXML;
var dados = doc.childNodes[0];
var end = document.getElementById('endereco');
 for(var i=0;i<dados.children.length;i++) {
 var dados = doc.childNodes[i];
var status = dados.getElementsByTagName("formatted_address");
 end.value = status[0].textContent.toString();
 }
 }
 }
 var url = "http://maps.googleapis.com/maps/api/geocode/xml?latlng=" + position.coords.latitude + "," + position.coords.longitude;
 xmlhttp.open("GET", url, true);
 xmlhttp.send();
 }
 function showError(error)
 {
 var end = document.getElementById('endereco');
 switch(error.code)
 {
case error.PERMISSION_DENIED:
end.value = "Não tenho permissão para acessar GPS"
break;
 case error.POSITION_UNAVAILABLE:
 end.value = "GPS retornou que a posição não está disponível"
break;
 case error.TIMEOUT:
 end.value = "GPS retornou timeout"
 break;
 case error.UNKNOWN_ERROR:
 end.value = "GPS retornou erro desconhecido"
break;
}
}
}
</script>
</html>

 

Você pode destrinchar o código fonte, mas os principais pontos são:

 

if (navigator.geolocation) {
 navigator.geolocation.getCurrentPosition(showPosition,showError);
} else {
x.innerHTML= "Seu browser não suporta Geolocalização.";
}

 

Com esse trecho verificamos se há uma geolocalização a ser obtida (no if) e se houver obtemos os dados, chamando a função showPosition. Caso não haja, ou seja, ocorra algum erro chamamos a função showError.

 

Se o navegador não suportar geolocalização navigator.geolocation retornará false, mostrando a mensagem de erro"Seu browser não suporta Geolocalização.".

 

O trecho abaixo recebe a geolocalização obtida pelo GPS e armazena na variável position, onde, position.coords.latitude conterá a latitude e position.coords.longitude a longitude.

 

function showPosition(position) {
 xmlhttp = new XMLHttpRequest();
 xmlhttp.onreadystatechange = function() {
 if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
 var doc = xmlhttp.responseXML;
var dados = doc.childNodes[0];
var end = document.getElementById('endereco');
 for(var i=0;i<dados.children.length;i++) {
 var dados = doc.childNodes[i];
var status = dados.getElementsByTagName("formatted_address");
 end.value = status[0].textContent.toString();
 }
 }
 }
 var url = "http://maps.googleapis.com/maps/api/geocode/xml?latlng=" + position.coords.latitude + "," + position.coords.longitude;
 xmlhttp.open("GET", url, true);
 xmlhttp.send();
}

 

A ideia aqui foi gerar uma URL para que o Google Maps retorne os dados do que se encontra na posição geográfica em formato XML.

 

O código abaixo cria a URL e obtém o XML que é retornado através dela:

 

xmlhttp = new XMLHttpRequest();
.
.
.
var url = "http://maps.googleapis.com/maps/api/geocode/xml?latlng=" + position.coords.latitude + "," + position.coords.longitude;
xmlhttp.open("GET", url, true);
xmlhttp.send();

 

O trecho abaixo foi omitido acima ;), é com ele que decodificamos o XML, pegado apenas o campo formatted_address do que for retornado:

 

xmlhttp.onreadystatechange = function() {
 if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
 var doc = xmlhttp.responseXML;
var dados = doc.childNodes[0];
var end = document.getElementById('endereco');
 for(var i=0;i<dados.children.length;i++) {
 var dados = doc.childNodes[i];
var status = dados.getElementsByTagName("formatted_address");
 end.value = status[0].textContent.toString();
 }
}
}

 

Para testar no Chrome para simular uma posição pressione CTRL + SHIFT + I, selecione a aba Sensors abaixo do painel e escolha alguma Geolocation.

 

 

 

Depois é só recarregar (F5) a página.

Adicionar comentário


Código de segurança
Atualizar

You are here: