Como fazer geolocalização

Como Fazer Um Site >> Extras Para o Seu Site >> Como fazer geolocalização



Com a API de geolocalização é possivel determinar a localização geográfica do visitante de um site. Isto pode por exemplo ser útil para quem está a criar um site pois permite informar o visitante de qual a sua posição, em coordenadas (latitude e longitude), e mostrar num mapa a sua localização actual.

A API é muito simples de usar.


Compatibilidade dos browsers

A API é suportada pelas versões mais recentes da maior parte dos browsers, incluindo Firefox, Chrome, IE e Safari.

A API funciona também na maior parte dos dispositivos móveis.


Privacidade

Para proteger a privacidade do utilizador, a informação sobre a sua localização só estará disponivel depois da sua aprovação. O browser emite uma mensagem, em que pede ao utilizador para confirmar que concorda que estará a partilhar a sua localização com o site em questão.


Usando a API de geolocalização

Usa-se o método getCurrentPosition() para obter a posição geográfica do internauta. Um outro método pode ser útil para quem se encontra em movimento e precisa de saber a sua posição à medida que se vai deslocando é o método watchPostion().

Os exemplos de aplicação de geolocalização aqui demonstrados foram implementados usando o método getCurrentPosition() que pode ser muito útil em alguns sites. O método getCurrentPosition() faz uma única geolocalização.


Obter a latitude e a longitude

<p id="demo">Clique no botão para obter as suas coordenadas:</p>
<button onclick="geoLocalizar()">Tentar</button>

<script>
var x=document.getElementById("demo");

function geoLocalizar() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(displayPosition,showError);
}
else{x.innerHTML="O seu browser não suporta a função de geolocalização.";}
}

function displayPosition(position) {
x.innerHTML="Latitude: " + position.coords.latitude +
"<br />Longitude: " + position.coords.longitude;
}

function showError(error) {
var errors = {
1: 'Permissão negada',
2: 'Posição não disponivel',
3: 'Tempo de pedido esgotado'
};
alert("Erro: " + errors[error.code]);
}
</script>

Experimente colar o código no editor de HTML em tempo real.


Clique no botão para obter as suas coordenadas:

O código verifica se a função de geolocalização é suportada pelo browser. Se não for suportada exibe uma mensagem de que o browser não suporta a geolocalização. Se for suportada então corre o método getCurrentPosition(), e a função displayPosition() exibe os dados da Latitude e da Longitude no monitor. No caso de ocorrer outro erro a função showError() exibe uma mensagem (Permissão negada - o utilizador não aprovou a partilha da sua localização; Posição não disponivel - não foi possivel obter os dados de localização; Tempo de pedido esgotado - o processo demorou demasiado tempo).


Mostrar a localização num mapa

Para mostrar uma localização num mapa é necessário aceder a um serviço de mapas que tenha a capacidade de usar as informações de latitude e longitude, como é o caso, por exemplo, do Google Maps. A função de displayPosition() é alterada para que a localização seja indicada no mapa:

<p id="demo">Clique no botão para ver a sua posição num mapa:</p>
<button onclick="geoLocalizar()">Tentar</button>
<div id="mapa"></div>

<script>
var x=document.getElementById("demo");

function geoLocalizar() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(displayPosition,showError);
}
else{x.innerHTML="O seu browser não suporta a função de geolocalização.";}
}

function displayPosition(position) {
var latlon=position.coords.latitude+","+position.coords.longitude; var img_url="http://maps.googleapis.com/maps/api/staticmap?center="+latlon+"&zoom=14&size=400x300&sensor=false";
document.getElementById("mapa").innerHTML="<img src='"+img_url+"' />";
}

function showError(error) {
var errors = {
1: 'Permissão negada',
2: 'Posição não disponivel',
3: 'Tempo de pedido esgotado'
};
alert("Erro: " + errors[error.code]);
}
</script>

Experimente colar o código no editor de HTML em tempo real.


Clique no botão para ver a sua posição num mapa:



Exemplo de geolocalização que informa o endereço

O que foi acima exposto é uma pequena introdução, é o básico para se perceber como se pode fazer geolocalização através dos browsers recorrendo ao HTML5. Explorando um pouco mais os parâmetros de geolocalização é possivel aplicar esta função de uma forma um pouco mais sofisticada.

Para isso resolvi criar uma página que informa o utilizador das suas coordenadas, que mostra um mapa com a sua localização, e que até o informa de qual é o seu endereço. Experimente:

As coordenadas e o endereço detectado podem não corresponder exactamente à sua actual posição, mas esta tecnologia produz na maior parte das vezes resultados bastante aproximados.



Registro de Dominio:
Namecheap.com

Domínios a preços acessíveis.
Inclui serviço de privacidade gratuito.

Hospedagem para seu site:

banner de afiliado

Eu próprio uso esta empresa
de hospedagem para alojar
os meus sites.

Criar Site Grátis:

Loja Virtual Grátis:

BLOG | FÓRUM | Política de Privacidade
Copyright © 2015 - ComoFazerUmSite.com
Design com Dreamweaver

.