Avaliação do Usuário

Estrela inativaEstrela inativaEstrela inativaEstrela inativaEstrela inativa
 

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.

 

{code}

<!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>

{/code}

 

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

 

{code}

if (navigator.geolocation) {

navigator.geolocation.getCurrentPosition(showPosition,showError);

} else {

x.innerHTML= "Seu browser não suporta Geolocalização.";

}

{/code}

 

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.

 

{code}

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();

}

{/code}

 

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:

 

{code}

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();

{/code}

 

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

 

{code}

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();

}

}

}

{/code}

 

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.