Desenvolvimento - HTML
Usando Geolocalização com HTML5
Veja nesse artigo como usar a API de Geolocalização disponível na versão 5 do HTML e veja também como exibir a localização do usuário em um Mapa do Google.
por Ricardo ArrigoniOlá pessoal, no artigo de hoje iremos ver como trabalhar com a API Geolocation do HTML5.
Primeiro de tudo devemos saber que existem três maneiras de se descobrir a posição de alguma coisa no globo terrestre que são as mais usadas, são elas:
- Geolocalização IP
- Triangulação GPRS
- GPS
Nota: Lembrando que para funcionar a geolocalização é necessário que o navegador do usuário tenha suporte a essa tecnologia.
Utilizando o método getCurrentPosition() é possível pegar a posição do usuário, como podemos ver no exemplo abaixo:
Listagem 1: Obtendo posição de Latitude e Longitude
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | <!DOCTYPE html> <html> <body> <p id= "demo" >Clique no botão para receber sua localização em Latitude e Longitude:</p> <button onclick= "getLocation()" >Clique Aqui</button> <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 + "<br>Longitude: " + position.coords.longitude; } </script> </body> </html> |
O código acima irá exibir no seu navegador as suas coordenadas de localização.
Basicamente o que fizemos foi:
- Verificamos se a Geolocalização é suportada pelo browser, caso positivo executamos o método getCurrentPosition(), caso contrário, exibimos uma mensagem de erro para o usuário.
- Após isso, se o método getCurrentPosition() for executado com sucesso, ele irá retornar as coordenadas para a função específica no parâmetro (showPosition).
- A função showPosition() exibe a Latitude e a Longitude para o usuário.
No exemplo acima não tivemos nenhum tratamento de um possível erro que possa acontecer, no exemplo abaixo iremos ver como tratar esses erros.
Listagem 2: Obtendo Geolocalização com tratamento de erros
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 | <!DOCTYPE html> <html> <body> <p id= "demo" >Clique no botão para receber as coordenadas:</p> <button onclick= "getLocation()" >Clique Aqui</button> <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 + "<br>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> |
Abaixo veremos o que quer dizer cada um dos códigos de erro:
- Permission denied - O usuário não permitiu o uso de Geolocalização
- Position unavailable - Não foi possível obter a localização
- Timeout - O tempo de resposta expirou
Exibindo a localização em um Mapa
Caso você não queria apenas exibir as coordenadas de latitude e longitude e queira exibir a posição do usuário em um mapa, basta utilizar o código abaixo.
Listagem 3: Exibindo a localização em um mapa com imagem estática
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 | <!DOCTYPE html> <html> <body> <p id= "demo" >Clique no botão para obter sua localização:</p> <button onclick= "getLocation()" >Clique aqui</button> <div id= "mapholder" ></div> <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; +latlon+ "&zoom=14&size=400x300&sensor=false" ; document.getElementById( "mapholder" ).innerHTML= "<img src='" +img_url+ "'>" ; } 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> |
Dessa forma o que será exibido ao usuário será a localização dele no mapa do Google Maps.
No exemplo da listagem 3 é exibido uma imagem estática do mapa, como se fosse um printscreen, mas é possível fazer com que seja exibido o mapa em si, onde o usuário pode editar e manipular dentro da API do Google Maps.
Listagem 4: Obtendo geolocalização e exibindo um mapa do google maps
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 | <!DOCTYPE html> <html> <body> <p id= "demo" >Clique no botão para obter sua localização:</p> <button onclick= "getLocation()" >Clique aqui</button> <div id= "mapholder" ></div> <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> |
Conclusão
Existem outras maneiras de se usar a API de Geolocalização, nesse artigo mostrei apenas as formas mais comuns de se trabalhar com elas.
Espero que tenham gostado e até o próximo artigo.