HTML5 Guia-4. Use a geolocalização para implementar a função de posicionamento

Autor：Eve Cole Data da Última Atualização：2025-04-02 19:00:04

O que queremos aprender hoje é usar a geolocalização para implementar funções de posicionamento. Podemos obter o objeto de geolocalização através da navegação.geolocation, que fornece os seguintes métodos:

getCurrentPosition (retorno de chamada, ErrorCallback, Opções): Obtenha o local atual;

WatchPosition (retorno de chamada, erro, opções): comece a monitorar a posição atual;

ClearWatch (ID): pare de monitorar o local atual.

Nota: O navegador usado no exemplo a seguir é o Chrome. Usando outros navegadores, não posso garantir que os resultados em execução sejam consistentes com os resultados exibidos pelo exemplo.

1. Obtenha o local atual

Usaremos o método GetCurrentPosition para obter a posição atual. As informações de posição não serão devolvidas diretamente na forma de resultado. Precisamos usar a função de retorno de chamada para processá -la. Haverá algum atraso na obtenção de coordenadas e você também solicitará permissões de acesso. Vejamos o exemplo a seguir:

<! Doctype html>

<html>

<head>

<title> Exemplo </title>

Tabela {colapso da borda: colapso;}

th, td {preenchimento: 4px;}

th {text-align: right;}

</style>

</head>

<Body>

<tr>

<th> longitude: </th>

<TH> Latitude: </th>

</tr>

<tr>

<th> altitude: </th>

<th> precisão: </th>

</tr>

<tr>

Excorrência de altitude: </th>

<th> título: </th>

</tr>

<tr>

Speed: </th>

<th> carimbo de hora: </th>

</tr>

</tabela>

<Cript>

Navigator.geolocation.GetCurrentPosition (DisplayPosition);

Função DisplayPosition (POS) {

var Properties = ['longitude', 'latitude', 'altitude', 'altitude', 'precisão', 'altitudeaccuracy', 'cabeçalho', 'speed'];

for (var i = 0, len = Properties.length; i <len; i ++) {

var value = pos.coords [Propriedades [i]];

Document.getElementById (Propriedades [i]). Innerhtml = value;

}

Document.getElementById ('Timestamp'). Innerhtml = Pos.timestamp;

}

</script>

</body>

</html>

O objeto de posição retornado contém duas propriedades, coordenar: retornar informações de coordenadas; Timestamp: o tempo para obter informações de coordenadas. Entre eles, os coordes incluem as seguintes propriedades: Latitude: Latitude; longitude: longitude; altitude: altura; precisão: precisão (medidor); AltitudeAccuracy: Precisão da altura (medidor); Cabeçando: direção de viagem; Velocidade: velocidade de viagem (medidor/segundo).

Nem todas as informações serão retornadas, depende do dispositivo que você hospeda o navegador. Dispositivos móveis, como GPS, aceleradores e bússolas, retornarão a maioria das informações, mas os computadores domésticos não funcionarão. As informações de localização obtidas por um computador doméstico dependem do ambiente de rede ou Wi -Fi. Vejamos os resultados em execução do exemplo acima.

Clique em Permitir obter informações de coordenadas.

2. Lidar com exceções

Agora, apresentamos o manuseio de exceção do getCurrentPosition, que é implementado usando a função de retorno de chamada do ErrorCallback. O erro do parâmetro retornado pela função contém duas propriedades, código: código do tipo de erro; Mensagem: mensagem de erro. O código contém três valores: 1: o usuário não está autorizado a usar a geolocalização; 2: As informações de coordenadas não podem ser obtidas; 3: O tempo limite da informação é obtido.

Vejamos um exemplo abaixo:

<! Doctype html>

<html>

<head>

<title> Exemplo </title>

Tabela {colapso da borda: colapso;}

th, td {preenchimento: 4px;}

th {text-align: right;}

</style>

</head>

<Body>

<tr>

<th> longitude: </th>

<TH> Latitude: </th>

</tr>

<tr>

<th> altitude: </th>

<th> precisão: </th>

</tr>

<tr>

Excorrência de altitude: </th>

<th> título: </th>

</tr>

<tr>

Speed: </th>

<th> carimbo de hora: </th>

</tr>

<tr>

<th> Código de erro: </th>

Mensagem de erro <th>: </th>

</tr>

</tabela>

<Cript>

Navigator.geolocation.getCurrentPosition (DisplayPosition, HandleError);

Função DisplayPosition (POS) {

var Properties = ["Longitude", "Latitude", "Altitude", "Precisão", "AltitudeAccuracy", "Heading", "Speed"];

for (var i = 0; i <Properties.length; i ++) {

var value = pos.coords [Propriedades [i]];

Document.getElementById (Propriedades [i]). Innerhtml = value;

}

Document.getElementById ("Timestamp"). Innerhtml = Pos.timestamp;

}

função handleerror (err) {

document.getElementById ("errcode"). innerhtml = err.code;

Document.getElementById ("ErrMessage"). Innerhtml = err.message;

}

</script>

</body>

</html>

Autorização é recusada, resultado da operação:

3. Use itens de parâmetros opcionais da geolocalização

As opções no getCurrentPosition (retorno de chamada, ErrorCallback, opções) têm os seguintes parâmetros a serem usados, enableHighAccuracy: use o melhor efeito; Tempo limite: tempo limite (milissegundos); Maximumagem: especifique o tempo de cache (milissegundos). Vamos dar uma olhada no exemplo a seguir:

<! Doctype html>

<html>

<head>

<title> Exemplo </title>

Tabela {colapso da borda: colapso;}

th, td {preenchimento: 4px;}

th {text-align: right;}

</style>

</head>

<Body>

<tr>

<th> longitude: </th>

<TH> Latitude: </th>

</tr>

<tr>

<th> altitude: </th>

<th> precisão: </th>

</tr>

<tr>

Excorrência de altitude: </th>

<th> título: </th>

</tr>

<tr>

Speed: </th>

<th> carimbo de hora: </th>

</tr>

<tr>

<th> Código de erro: </th>

Mensagem de erro <th>: </th>

</tr>

</tabela>

<Cript>

var options = {

EnableHighCuracy: False,

Tempo limite: 2000,

Maximumagem: 30000

};

Navigator.geolocation.GetCurrentPosition (DisplayPosition, HandleError, Opções);

Função DisplayPosition (POS) {

var Properties = ["Longitude", "Latitude", "Altitude", "Precisão", "AltitudeAccuracy", "Heading", "Speed"];

for (var i = 0; i <Properties.length; i ++) {

var value = pos.coords [Propriedades [i]];

Document.getElementById (Propriedades [i]). Innerhtml = value;

}

Document.getElementById ("Timestamp"). Innerhtml = Pos.timestamp;

}

função handleerror (err) {

document.getElementById ("errcode"). innerhtml = err.code;

Document.getElementById ("ErrMessage"). Innerhtml = err.message;

}

</script>

</body>

</html>

Abaixo, apresentamos o uso do método de relógio para implementar as alterações de posição. Seu método de uso é o mesmo que o GetCurrentPosition. Vejamos o exemplo:

<! Doctype html>

<html>

<head>

<title> Exemplo </title>

Tabela {colapso da borda: colapso;}

th, td {preenchimento: 4px;}

th {text-align: right;}

</style>

</head>

<Body>

<tr>

<th> longitude: </th>

<TH> Latitude: </th>

</tr>

<tr>

<th> altitude: </th>

<th> precisão: </th>

</tr>

<tr>

Excorrência de altitude: </th>

<th> título: </th>

</tr>

<tr>

Speed: </th>

<th> carimbo de hora: </th>

</tr>

<tr>

<th> Código de erro: </th>

Mensagem de erro <th>: </th>

</tr>

</tabela>

<button id = "Pressme"> Cancelar relógio </botão>

<Cript>

var options = {

EnableHighCuracy: False,

Tempo limite: 2000,

Maximumagem: 30000

};

var watchId = Navigator.geolocation.watchPosition (DisplayPosition, HandleError, Opções);

document.getElementById ("PressMe"). OnClick = function (e) {

Navigator.geolocation.clearwatch (WatchId);

};

Função DisplayPosition (POS) {

var Properties = ["Longitude", "Latitude", "Altitude", "Precisão", "AltitudeAccuracy", "Heading", "Speed"];

for (var i = 0; i <Properties.length; i ++) {

var value = pos.coords [Propriedades [i]];

Document.getElementById (Propriedades [i]). Innerhtml = value;

}

Document.getElementById ("Timestamp"). Innerhtml = Pos.timestamp;

}

função handleerror (err) {

document.getElementById ("errcode"). innerhtml = err.code;

Document.getElementById ("ErrMessage"). Innerhtml = err.message;

}

</script>

</body>

</html>

Quando o botão de relógio cancelado é clicado, o monitoramento para.

Endereço para download de demonstração: html5guide.geolocation.zip