Um tipo de serviço mais popular é chamado de serviço baseado em localização (LBS). Esse tipo de serviço são as informações de que as empresas usam áreas próximas às coordenadas de um determinado ponto (como o local em que o usuário está localizado), como serviços comuns relacionados ao mapa. No HTML5, uma nova API de geolocalização foi adicionada para determinar e compartilhar a geolocalização.
Declaração de privacidadeA privacidade é uma preocupação ao compartilhar um local físico com um servidor da Web remoto. Portanto, a API de geolocalização exige que o usuário forneça permissões antes que o aplicativo da Web possa acessar as informações do local. Quando você acessa pela primeira vez uma página da Web que solicita dados de geolocalização, o navegador exibirá uma barra de notificação solicitando que você forneça acesso à localização do usuário. Siga as instruções do navegador e selecione a autorização relevante.
Se o usuário não conceder permissões, as informações de localização não serão fornecidas ao aplicativo da web. Chamar a API relevante não acionará um retorno de chamada bem -sucedido.
Verifique o suporte do navegadorA API de geolocalização é suportada na versão mais recente dos navegadores convencionais, mas, para ser compatível com navegadores antigos, você ainda precisa conferir. Se a API de geolocalização não estiver disponível, Window.navigator.geolocation será nulo da seguinte forma:
função show_islocationEnabled ()
{
var str = "Não, a geolocalização não é suportada.";
if (window.navigator.geolocation) {
str = "Sim, a geolocalização é suportada.";
}
alerta (str);
}
A API de geolocalização é baseada em uma nova propriedade do Objeto Global de Navegação: Navigator.geolocation, que fornece algumas informações úteis sobre o navegador e o sistema do visitante. As informações de geolocalização podem ser obtidas por muitos meios: como estações básicas, bancos de dados da Web ou GPS. A precisão das informações de geolocalização obtida usando métodos diferentes também é diferente. De um modo geral, o mais preciso é obtido através do GPS (o maior número de GPs é usado em plataformas móveis e a plataforma PC depende basicamente de dados de rede). Por acaso, em alguns locais, talvez você não consiga obter leituras claras de localização geográfica ou não receber dados.
Posicione o local atualUse o método getCurrentPosition () de navegação.geolocation para obter o local atual do usuário. Este método obtém apenas as informações de localização uma vez. Quando o método é chamado pelo script, o método tenta obter a localização atual do dispositivo host de maneira assíncrona.
Método assinatura: getCurrentPosition (geolocationsuccessCallback, [geolocationErrorCallback, geolocationOptions]);
1. GeolocationsUccessCallback: Obtenha o retorno de chamada depois que o local atual for bem -sucedido (exigido)
2. GeolocationErrorCallback. Retorno de chamada usado quando ocorre um erro (opcional)
3. GeolocationOptions. Opções de geolocalização (opcional)
Informações de localização do processo
Após o método getCurrentPositon () obtém com sucesso a posição atual, ele salvará as informações de posição em um objeto de posição e, em seguida, usará esse objeto como um parâmetro para executar o retorno de chamada do geolocationsuccessCallback. Nesta função de retorno de chamada, você pode lidar arbitrariamente às informações contidas neste objeto.
O objeto de posição possui duas propriedades: registro de data e hora e coordenados. O atributo Timestamp representa o tempo de criação dos dados de geolocalização, e o atributo Coords representa informações de geolocalização e contém sete atributos:
.COORDS.Latitude: estimar a latitude
. coordenamento.Longitude: estimar longitude
.coords.altitude: altura estimada
. Coords.curacy: a precisão das estimativas de longitude e latitude fornecidas em medidores
.coords.altitudeAccuracy: a precisão das estimativas de altura fornecidas nos medidores
. coordenadas.
.coords.speed: A velocidade do solo atual do dispositivo em metros por segundo
Geralmente, três dessas propriedades são garantidas: coordenamento. Isso depende dos recursos do dispositivo e do servidor de posicionamento de back -end que ele usa. Além disso, as propriedades do cabeçalho e da velocidade podem ser calculadas com base na posição anterior do usuário.
Erros de manuseioSe ocorrer um erro ao executar o método getCurrentPositon (), o método passa um objeto PositionError para o retorno de chamada GeolocationErrorCallback.
Defina opções de geolocalizaçãoVocê pode definir três propriedades de geolocationOptions:
EnableHighAccuracy: Se o dispositivo suportar alta precisão, esta opção indica se a alta precisão está ativada.
Tempo limite: Tempo limite da consulta
Máximo: o número máximo de vezes que o cache está localizado, durante o qual o cache pode ser usado.
Veja o exemplo completo abaixo:
<! Doctype html>
<html>
<Body>
<P ID = "Demo"> Clique no botão para obter sua posição: </p>
<button onclick = "getLocation ()"> Experimente </botão>
<div id = "maholder"> </div>
<Cript>
var x = document.getElementById ("Demo");
função getLocation () {
if (navegator.geolocation) {
Navigator.geolocation.GetCurrentPosition (ShowPosition, Showerror);
}
outro{
x.innerhtml = "A geolocalização não é suportada por este navegador.";
}
}
função exibição (posição) {
var latlon = position.coords.latitude+","+position.coords.longitude;
var img_url = "http://maps.googleapis.com/maps/api/staticmap?center=" +
latlon + "& zoom = 9 & size = 400x300 & sensor = false";
document.getElementById ("maholder"). innerhtml = "<img src = '"+img_url+"' />";
}
Função Showerror (Erro) {
switch (error.code) {
Error de caso.permission_denied:
x.innerhtml = "O usuário negou o pedido de geolocalização".
quebrar;
Error de caso.Position_Unavilable:
x.innerhtml = "Informações de localização não estão disponíveis".
quebrar;
Erro de caso.Timeout:
x.innerhtml = "A solicitação para obter o local do usuário cronometrado".
quebrar;
Error de caso.unknown_error:
x.innerhtml = "Ocorreu um erro desconhecido".
quebrar;
}
}
</script>
</body>
</html>
Este exemplo pega a localização geográfica do dispositivo atual e o exibe no Google Maps. É claro que você pode usar a versão gráfica estática na API do Baidu Maps para transformar este exemplo. Para a API do mapa do Baidu, consulte o link na referência prática posteriormente.
Ligue/cancele o posicionamento contínuoUse o método de watchPosition () de navegação.geolocation para pesquisar regularmente a localização do usuário para verificar se a localização do usuário mudou. Este método possui três parâmetros: esses três parâmetros são os mesmos que o método getCurrentPosition (), um retorno de chamada bem -sucedido, um retorno de chamada com falha e uma opção para obter informações de posição; Este método possui um valor de retorno, que é usado para cancelar o posicionamento contínuo.
Use o método clearwatch () de navegação.geolocation para encerrar o relógio em andamento (), que leva apenas um parâmetro watchId.
Veja o seguinte exemplo:
<! Doctype html>
<html>
<head>
<title> API da geolocalização Exemplo: ouvindo atualizações de localização </ititle>
<meta http-equiv = "x-ua compatível com" content = "ie = 9" />
<script type = "text/javascript">
função setText (val, e) {
document.getElementById (e) .Value = val;
}
var NAV = nulo;
var watchid;
function listerForPositionUpDates () {
if (Nav == null) {
Nav = Window.navigator;
}
if (Nav! = null) {
var geoloc = nav.geolocation;
if (geoloc! = null) {
watchId = geoloc.watchPosition (sucessoCallback);
}
outro {
alerta ("Geolocation não suportado");
}
}
outro {
alerta ("navegador não encontrado");
}
}
função clearwatch (watchId) {
window.navigator.geolocation.clearwatch (watchId);
}
função successCallback (posição)
{
setText (position.coords.latitude, "Latitude");
setText (position.coords.longitude, "longitude");
}
</script>
</head>
<Body>
<Label para = "Latitude"> Latitude: </cret> <input id = "Latitude" />
<Label para = "Longitude"> Longitude: </elabel> <input id = "longitude" />
<input type = "button" value = "observe a latitude e longitude" onclick = "listerForPositionUpDates ()" />
<input type = "button" value = "clear watch" onclick = "clearwatch ()" />
</body>
</html>
Referência prática:Documento oficial: http://www.w3schools.com/html5/html5_geolocation.asp
Preocupações com modelos: http://www.cuoxin.com/w3school/html5/
Microsoft Ajuda: http://msdn.microsoft.com/zh-cn/library/gg589502(v=vs.85)
Baidu Map API: http://dev.baidu.com/wiki/static/index.htm