Comentário: Este prato começou a aprender HTML5 e agora está bastante interessado em geolocalização. A função básica de posicionamento do mapa é implementada em combinação com a API do Google Map. As etapas a seguir são usadas principalmente: obtenha a localização geográfica atual e ligue para a API do Google Map para obter as informações de localização atuais.
Este prato começou a aprender HTML5 e agora está bastante interessado em geolocalização e combina a API do Google Map para implementar funções básicas de posicionamento do mapa.1. Obtenha a localização geográfica atual
Chame o método void getCurrentPosition (OnSuccess, OnError, Options);
Onde o Onsuccess é uma função de retorno de chamada executada quando as informações atuais do local são bem -sucedidas, o OnError é uma função de retorno de chamada executada quando as informações de localização atuais são falhadas, as opções são algumas listas familiares opcionais. O segundo e o terceiro parâmetros são atributos opcionais.
Na função de retorno de chamada onCess, a posição do parâmetro é usada para representar um objeto de posição específico e representar a posição atual. Tem as seguintes propriedades:
• Latitude: a latitude da localização geográfica atual.
• Longitude: a longitude da localização geográfica atual.
• Altitude: a altitude do local atual (nulo se não puder ser recuperado).
• Precisão: precisão (em metros) da latitude e longitude obtidas.
• AltitudeAccuracy: a longitude (em metros) da altitude obtida.
• Aviso: a direção do dispositivo. É representado por um ângulo de rotação no sentido horário voltado para a direção para a frente (nulo se não puder ser recuperado).
• Velocidade: a velocidade direta do dispositivo (em metros/segundo, nulo, se não puder ser recuperado).
• Timestamp: o tempo em que você obtém informações de geolocalização.
Na função de retorno de chamada do OnError, o parâmetro de erro é usado. Tem as seguintes propriedades:
• Código: código de erro, com o seguinte valor.
1. O usuário rejeitou o serviço de localização (o valor do atributo é 1);
2. As informações de localização não podem ser obtidas (o valor do atributo é 2);
3. Obtenha o erro de tempo limite da informação (o valor da propriedade é 3).
• Mensagem: string, contendo informações específicas de erro.
No parâmetro de opções, as propriedades opcionais são as seguintes:
• EnableHighCuracy: se é necessária se as informações de geolocalização de alta precisão são necessárias.
• Tempo limite: defina o tempo de tempo limite (em milissegundos).
• Maximumagem: o tempo válido (em milissegundos) para informações de geolocalização de cache.
Observe que você precisa escrever o código a seguir para determinar se o navegador suporta HTML5 para obter informações de localização geográfica, para ser compatível com os navegadores que não foram suportados anteriormente.
if (navegator.geolocation) {
// Obtenha as informações atuais de localização geográfica
Navigator.geolocation.getCurrentPosition (Onsuccess, Oneerror, Opções);
} outro {
Alert ("Seu navegador não suporta HTML5 para obter informações sobre geolocalização.");
}
2. Ligue para o Google Map API para obter informações de localização atuais
Primeiro, você precisa fazer referência ao arquivo de script da API do mapa do Google na página. O método de importação é o seguinte.
<script type = "text/javascript" src = "http://maps.google.com/maps/api/js?sensor=false"> </script>
Em segundo lugar, defina os parâmetros do mapa e o método de configuração é o seguinte.
// Especifique um ponto de coordenada no mapa do Google e também especifique as coordenadas horizontais e verticais do ponto de coordenada.
var latlng = new google.maps.latlng (coords.latitude, coords.longitude);
var mioptions = {
Zoom: 14, // Defina a ampliação
centro: latlng, // defina o ponto central do mapa para o ponto de coordenada especificado
MapTypeid: google.maps.maptypeid.roadmap // Especifique o tipo de mapa
};
Por fim, crie um mapa e exiba -o na página, o método de criação é o seguinte
// Crie um mapa e exiba -o no mapa da página
var map = new google.maps.map (document.getElementById ("map"), mioptions);
No final, todos os códigos para este exemplo são apresentados. O código é mostrado abaixo.
<! Doctype html>
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv = "content-type" content = "text /html; charset = utf-8" />
<title> Obtenha o local atual e exiba -o no Google Maps </ititle>
<script type = "text/javascript" src = "http://maps.google.com/maps/api/js?sensor=false"> </script>
<script type = "text/javascript">
function init () {
if (navegator.geolocation) {
// Obtenha a localização geográfica atual
Navigator.geolocation.getCurrentPosition (função (posição) {
var coords = position.coords;
//console.log(Position);
// Especifique um ponto de coordenada no mapa do Google e também especifique as coordenadas horizontais e verticais do ponto de coordenada.
var latlng = new google.maps.latlng (coords.latitude, coords.longitude);
var mioptions = {
Zoom: 14, // Defina a ampliação
centro: latlng, // defina o ponto central do mapa para o ponto de coordenada especificado
MapTypeid: google.maps.maptypeid.roadmap // Especifique o tipo de mapa
};
// Crie um mapa e exiba -o no mapa da página
var map = new google.maps.map (document.getElementById ("map"), mioptions);
// Crie marcas no mapa
var marker = new google.maps.marker ({
Posição: Latlng, // Clique nas coordenadas definidas acima
Mapa: mapa // defina esta anotação no mapa que você acabou de criar
});
// Janela prompt de tag
var infowindow = new google.maps.infowindow ({
Conteúdo: "Localização atual: <br/> Long:" + latlng.lat () + "<br/>
});
// Abra a janela rápida
infowindow.open (mapa, marcador);
},
função (erro) {
// Erro de processamento
switch (error.code) {
Caso 1:
alerta ("Serviço de localização negado");
quebrar;
Caso 2:
alerta ("As informações de localização não podem ser obtidas por enquanto.");
quebrar;
Caso 3:
alerta ("Obtenha o tempo limite das informações.");
quebrar;
padrão:
alerta ("erro desconhecido");
quebrar;
}
});
} outro {
Alert ("Seu navegador não suporta HTML5 para obter informações sobre geolocalização.");
}
}
</script>
</head>
<Body>
<div> </div>
</body>
</html>