Você deve ter percebido que ao entrar em qualquer site, um navegador aparece pedindo para você autorizar o compartilhamento de sua localização, certo? A princípio, esse recurso pode parecer irrelevante, mas pode ajudar muito os sites que você visita a montar um conteúdo mais confiável no material que será fornecido a você.
No que me diz respeito, um mercado de tatuadores, é importante para que possamos escolher o profissional mais próximo de você, o que parece fazer sentido, certo? Essa é uma ferramenta básica porque ninguém quer achar uma tatuagem legal e depois descobrir que o artista é de Manaus e você é de São Paulo.
Neste artigo, vamos apenas capturar essa permissão e exibir as coordenadas do usuário (latitude e longitude) na tela.
Sabendo disso, você pode ir além e salvá-lo em um banco de dados, por exemplo, e mostrar uma lista nas buscas com base na distância entre o endereço do usuário e o endereço do seu produto, seja tatuador, usuário ou qualquer consulta.
Antes de tudo devemos saber que existem três maneiras de descobrir a localização de algo mais usado na Terra, são elas:
Geolocalização IP
Triangulação GPRS
GPS
Observação: lembre-se de que, para que a geolocalização funcione, o navegador do usuário deve suportar essa tecnologia.
A posição do usuário pode ser obtida usando o método getCurrentPosition(), conforme mostrado no exemplo a seguir:
Listagem 1: Obtendo locais de latitude e longitude
<*!DOCTYPE html>
<*html>
<*body>
<*p id=”demo”>Clique no botão para receber sua localização em Latitude e Longitude:
<*button onclick=”getLocation()”>Clique Aqui
<*script>
*var x=document.getElementById(“demo”);
*function getLocation()
{*
*if (navigator.geolocation)
*{
*navigator.geolocation.getCurrentPosition(showPosition);
*}
*else{x.innerHTML=”O seu navegador não suporta Geolocalização.”;}
*}
*function showPosition(position)
*{
*x.innerHTML=”Latitude: ” + position.coords.latitude +
*”
Longitude: ” + position.coords.longitude;
*}
<*/script>
<*/body>
<*/html>
RETIRE OS ASTERICOS PARA O CODIGO FUNCIONAR
O código acima exibirá suas coordenadas de localização em seu navegador.
Basicamente o que fazemos é:
Verificamos se o navegador suporta Geolocalização, se sim, executamos o método getCurrentPosition(), caso contrário exibimos uma mensagem de erro ao usuário.
Depois disso, se o método getCurrentPosition() for executado com sucesso, ele retornará as coordenadas da função específica no parâmetro (showPosition).
A função showPosition() exibe a latitude e longitude para o usuário.
No exemplo acima não fizemos nenhum tratamento de possíveis erros, no exemplo a seguir veremos como lidar com esses erros.
Listagem 2: Obtendo Geolocalização com tratamento de erros
<*!DOCTYPE html>
<*html>
<*body>
<*p id=”demo”>Clique no botão para receber as coordenadas:
<*button onclick=”getLocation()”>Clique Aqui
<*script>
*var x=document.getElementById(“demo”);
*function getLocation()
{*
*if (navigator.geolocation)
{*
*navigator.geolocation.getCurrentPosition(showPosition,showError);
*}
*else{x.innerHTML=”Seu browser não suporta Geolocalização.”;}
*}
*function showPosition(position)
*{
*x.innerHTML=”Latitude: ” + position.coords.latitude +
*”
Longitude: ” + position.coords.longitude;
*}
*function showError(error)
{*
*switch(error.code)
{*
*case error.PERMISSION_DENIED:
*x.innerHTML=”Usuário rejeitou a solicitação de Geolocalização.”
*break;
*case error.POSITION_UNAVAILABLE:
*x.innerHTML=”Localização indisponível.”
*break;
*case error.TIMEOUT:
*x.innerHTML=”A requisição expirou.”
*break;
*case error.UNKNOWN_ERROR:
*x.innerHTML=”Algum erro desconhecido aconteceu.”
*break;
}*
}*
</*script>
</*body>
</*html>
RETIRE OS ASTERISCOS PARA FUNCIONAR
Abaixo veremos o que significa cada código de erro:
Permissão negada – O usuário não tem permissão para usar a geolocalização
Localização indisponível – Não foi possível obter a localização
timeout – o tempo de resposta expirou
Mostrar localização no mapa
Se você não deseja apenas exibir as coordenadas de latitude e longitude, mas também exibir a localização do usuário no mapa, basta usar o código abaixo.
Listagem 3: Exibindo a localização em um mapa com imagem estática
<*!DOCTYPE html>
<*html>
<*body>
<*p id=”demo”>Clique no botão para obter sua localização:
<*button onclick=”getLocation()”>Clique aqui
<*div id=”mapholder”>
<*script>
*var x=document.getElementById(“demo”);
*function getLocation()
{*
*if (navigator.geolocation)
{*
*navigator.geolocation.getCurrentPosition(showPosition,showError);
*}
*else{x.innerHTML=”Geolocation is not supported by this browser.”;}
}*
*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=400×300&sensor=false”;
*document.getElementById(“mapholder”).innerHTML=”“;
*}
*function showError(error)
{*
*switch(error.code)
{*
*case error.PERMISSION_DENIED:
*x.innerHTML=”Usuário rejeitou a solicitação de Geolocalização.”
*break;
*case error.POSITION_UNAVAILABLE:
*x.innerHTML=”Localização indisponível.”
*break;
*case error.TIMEOUT:
*x.innerHTML=”O tempo da requisição expirou.”
*break;
*case error.UNKNOWN_ERROR:
*x.innerHTML=”Algum erro desconhecido aconteceu.”
*break;
}*
}*
</*script>
</*body>
</*html>
RETIRE OS ASTERISCOS PARA FUNCIONAR
Dessa forma, o usuário verá sua localização no mapa do Google Maps.
No exemplo da Listagem 3, uma imagem estática do mapa é exibida como se fosse uma tela de impressão, mas o próprio mapa também pode ser exibido, que o usuário pode editar e manipular na API do Google Maps.
Listagem 4: Obtendo geolocalização e exibindo um mapa do google maps
<!*DOCTYPE html>
<*html>
Clique no botão para obter sua localização:
Clique aqui
<*script>
*var x=document.getElementById(“demo”);
*function getLocation()
{*
*if (navigator.geolocation)
{*
*navigator.geolocation.getCurrentPosition(showPosition,showError);
*}
*else{x.innerHTML=”Geolocalização não é suportada nesse browser.”;}
*}
*function showPosition(position)
*{
*lat=position.coords.latitude;
*lon=position.coords.longitude;
*latlon=new google.maps.LatLng(lat, lon)
*mapholder=document.getElementById(‘mapholder’)
*mapholder.style.height=’250px’;
*mapholder.style.width=’500px’;
*var myOptions={
*center:latlon,zoom:14,
*mapTypeId:google.maps.MapTypeId.ROADMAP,
*mapTypeControl:false,
*navigationControlOptions:{style:google.maps.NavigationControlStyle.SMALL}
*};
*var map=new google.maps.Map(document.getElementById(“mapholder”),myOptions);
* var marker=new google.maps.Marker({position:latlon,map:map,title:”Você está Aqui!”});
*}
*function showError(error)
*{
*switch(error.code)
*{
*case error.PERMISSION_DENIED:
* x.innerHTML=”Usuário rejeitou a solicitação de Geolocalização.”
*break;
*case error.POSITION_UNAVAILABLE:
*x.innerHTML=”Localização indisponível.”
*break;
*case error.TIMEOUT:
*x.innerHTML=”O tempo da requisição expirou.”
*break;
*case error.UNKNOWN_ERROR:
*x.innerHTML=”Algum erro desconhecido aconteceu.”
*break;
*}
*}
<*/script>
<*/body>
<*/html>
RETIRE OS ASTERISCOS PARA FUNCIONAR
Conclusão
Existem outras maneiras de usar a API de geolocalização e, neste artigo, mostrei apenas as formas mais comuns de usá-las.
Espero que gostem até o próximo post.
