Várias maneiras de localizar localização geográfica: endereço IP, GPS, WiFi, GSM/CDMA
Processo de aquisição de localização geográfica :1. O usuário abre um aplicativo da Web que precisa obter uma localização geográfica.
2. O aplicativo solicita o navegador à localização geográfica e o navegador aparece uma consulta para perguntar se o usuário está compartilhando o local geográfico.
3. Supondo que o usuário permita, o navegador consulte as informações relevantes das configurações.
4. O navegador envia informações relevantes para um servidor de localização confiável e o servidor retorna ao local geográfico específico.
Implementação do status geográfico HTML5 :1. Implemente a tecnologia de obter usuários com base no navegador (não é necessário suporte de back -end)
2. Localize com precisão a localização geográfica do usuário (a precisão é de até 10m, dependendo do equipamento)
3. Rastrear continuamente a localização geográfica do usuário
4. Apresente informações interativas de localização com o mapa do Google ou o mapa Baidu
A API de geolocalização é usada para compartilhar as informações de geolocalização atuais do usuário com sites confiáveis, que envolve os problemas de privacidade e segurança do usuário. Portanto, quando um site precisa obter a geolocalização atual do usuário, o navegador solicitará ao usuário permitir ou rejeitar.
Vamos primeiro olhar para quais navegadores suportam a API de geolocalização:
IE9.0+, ff3.5+, safari5.0+, Chrome5.0+, Opera10.6+, iPhone3.0+, Android2.0+
A API de geolocalização existe no objeto Navigator e contém apenas 3 métodos:
1. GetCurrentPosition // Localização atual
2. Relógio // Local de monitoramento
3. ClearWatch // Monitoramento claro
Navigator.geolocation.getCurrentPosition (…, function (erro) {
switch (error.code) {
Erro de caso.Timeout:
Alert ("Conexão com tempo, tente novamente");
quebrar;
Error de caso.permission_denied:
Alert ("Você rejeitou o uso do serviço de compartilhamento de localização, a consulta foi cancelada");
quebrar;
Error de caso.Position_Unavilable:
alerta (", desculpe, você não pode fornecer serviços de localização ao seu planeta por enquanto");
quebrar;
}
});
O WatchPosition é como um rastreador emparelhado com o ClearWatch.
O WatchPosition é um pouco como a maneira como o SetInterval e o ClearInterval trabalham.
var watchPositionId = Navigator.geolocation.watchPosition (SUCCEST_CALLBACK, ERROR_CALLBACK, OPTIONS);
Navigator.geolocation.clearwatch (WatchPositionId);
O HTML 5 fornece uma série de APIs como a localização geográfica para os usuários usarem, o que facilita os usuários a criar aplicativos geográficos da LBS. Primeiro, em um navegador que suporta HTML 5, ao abrir a API, perguntará se o usuário concorda em usar a API, caso contrário, não será ativada, garantindo a segurança.
1. Ligue para determinar se o navegador suporta API LBSfunção isgeolocalocationApiavailable ()
{
var location = "Não, a geolocalização não é suportada por este navegador.";
if (window.navigator.geolocation) {
Location = "Sim, a geolocalização é suportada por este navegador.";
}
alerta (localização);
}
No exemplo acima, a exceção também foi capturada no método DisplayError;
2. Obtenha a localização geográfica do usuárioIsso é feito usando getCurrentPosition;
function requestPosition () {
if (Nav == null) {
Nav = Window.navigator;
}
if (Nav! = null) {
var geoloc = nav.geolocation;
if (geoloc! = null) {
geoloc.getCurrentPosition (SuccessCallback);
}
outro {
alerta ("a API de geolocalização não é suportada no seu navegador");
}
}
outro {
alerta ("Navigator não é encontrado");
}
}
Quando a localização geográfica for obtida com sucesso, um método de retorno de chamada será gerado para processar o resultado retornado.
função setLocation (val, e) {
document.getElementById (e) .Value = val;
}
função successCallback (posição)
{
setLocation (position.coords.latitude, "Latitude"); setLocation (position.coords.longitude, "longitude");
}
3. Uma pergunta muito comum é como rastrear a mudança de localização geográfica dos usuários. Aqui resumimos as duas APIs usadas.1 relógio
Exemplos são os seguintes:
function listerForPositionUpDates () {
if (Nav == null) {
Nav = Window.navigator;
}
if (Nav! = null) {
var geoloc = nav.geolocation;
if (geoloc! = null) {
watchId = geoloc.watchPosition (sucessoCallback);
} outro {
alerta ("a API de geolocalização não é suportada no seu navegador");
}
} outro {
alerta ("Navigator não é encontrado");
}
}
Em seguida, no sucessoCallback, você pode definir o local geográfico mais recente para exibir:
função successCallback (posição) {
setText (position.coords.latitude, "Latitude"); setText (position.coords.longitude, "longitude");
}
Se você não deseja rastreamento em tempo real, pode cancelá-lo:
função clearwatch (watchId) {
window.navigator.geolocation.clearwatch (watchId);
}
4. Como lidar com exceçõesQuando uma exceção é encontrada, você pode pegá -lo:
if (geoloc! = null) {
geoloc.getCurrentPosition (SuccessCallback, ErrorCallback);
}
função errorcallback (erro) {
var message = "";
switch (error.code) {
Error de caso.permission_denied:
message = "Este site não tem permissão para usar"
+ "A API da geolocalização";
quebrar;
Error de caso.Position_Unavilable:
message = "A posição atual não pôde ser determinada.";
quebrar;
Error de caso.permission_denied_timeout:
message = "A posição atual não pôde ser determinada"
+ "dentro do período de tempo limite especificado.";
quebrar;
}
if (message == "") {
var strerRorCode = error.code.toString ();
mensagem = "A posição não pôde ser determinada devido a"
+ "um erro desconhecido (código:" + strRerRorCode + ").";
}
alerta (mensagem);
}
5. Exiba a localização no mapa do Google (desde que a API do mapa do Google esteja definida)função getCurrentLocation ()
{
if (navegator.geolocation)
{
Navigator.geolocation.GetCurrentPosition (ShowMyPosition, Showerror);
}
outro
{
alerta ("Não, a API de geolocalização não é suportada por este navegador.");
}
}
Função ShowMyPeition (posição)
{
var coordenadas = position.coords.latitude+","+position.coords.longitude;
var map_url = "http://maps.googleapis.com/maps/api/staticmap?center="
+coordenadas+"& zoom = 14 & size = 300x300 & sensor = false";
document.getElementById ("googleMap"). innerhtml = "<img src = '"+map_url+"' />";
}
Função Showerror (erro)
{
switch (erro.code)
{
Error de caso.permission_denied:
Alert ("Este site não tem permissão para usar a API de geolocalização")
quebrar;
Error de caso.Position_Unavilable:
Alerta ("A posição atual não pôde ser determinada.")
quebrar;
Erro de caso.Timeout:
alerta ("A posição atual não pôde ser determinada dentro do período de tempo limite especificado")
quebrar;
Error de caso.unknown_error:
alerta ("A posição não pôde ser determinada devido a um erro desconhecido.")
quebrar;
}
}