Como usar a função de posicionamento da geolocalização HTML5

Usando código JavaScript relativamente simples, você pode criar aplicativos da Web que podem determinar os detalhes da localização geográfica do usuário, incluindo latitude e longitude e altitude. Alguns aplicativos da Web podem até fornecer funções de navegação, monitorando o movimento dos locais do usuário ao longo do tempo, o que também integra sistemas de mapa, como a API do GoogleMaps.

O HTML5 fornece API de geolocalização para determinar a localização do usuário. Podemos usar esse recurso do HTML5 para desenvolver aplicativos com base em informações de geolocalização. Este artigo combina exemplos para compartilhar com você como usar o HTML5 e usar interfaces Baidu e Google Map para obter informações precisas de localização geográfica dos usuários.

A geolocalização é um novo recurso do HTML5, portanto, é possível executar apenas os navegadores modernos que suportam HTML5, especialmente dispositivos portáteis, como iPhones, onde a geolocalização é mais precisa. Primeiro, precisamos detectar se o navegador do dispositivo do usuário suporta a geolocalização e, em caso afirmativo, obter informações geográficas. Observe que esse recurso pode infringir a privacidade do usuário. A menos que o consentimento do usuário seja, as informações de localização do usuário não estão disponíveis; portanto, quando acessarmos o aplicativo, solicitaremos a permitir a geolocalização e, é claro, podemos optar por permitir.

1. functionGetLocation () {
2. if (navegator.geolocation) {
3. Navigator.geolocation.GetCurrentPosition (ShowPosition, Showerror);
4. }outro{
5. alerta (o navegador não suporta a geolocalização.);
6. }
7. }

O código acima mostra que, se o dispositivo do usuário suportar geolocalização, execute o método getCurrentPosition (). Se o getCurrentPosition () funcionar com sucesso, um objeto de coordenadas será retornado à função especificada no parâmetro ShowPosition. O segundo parâmetro do método getCurrentPosition () é usado para lidar com o erro, que especifica a função que é executada quando o local do usuário não consegue.

Vamos primeiro olhar para a função SHOWRROR (), que especifica o manuseio de alguns códigos de erro ao obter o local geográfico do usuário:

1. functionShowerRor (erro) {
2. switch (error.code) {
3. caseError.permission_denied:
4. alerta (localização falhou, o usuário se recusa a solicitar a geolocalização);
5. quebrar;
6. caseError.Position_Unavilable:
7. alerta (falha na localização, informações de localização não estão disponíveis);
8. quebrar;
9. caseError.timeout:
10. alerta (falha na localização, solicitando obter o tempo limite da localização do usuário);
11. quebrar;
12. caseError.unknown_error:
13. alerta (falha na localização, falha no sistema de posicionamento);
14. quebrar;
15. }
16. }

Vejamos a função ShowPosition () e chamar a latitude e longitude dos coordenados para obter a latitude e a longitude do usuário.

1. FunctionShowPosition (posição) {
2. varlat = position.coords.latitude; // latitude
3. Varlag = POSITION.COORDS.Longitude; // Longitude
4. alerta ('lat:'+lat+', longitude:'+lag);
5. }

Use mapas Baidu e interfaces do Google Maps para obter endereços do usuário

Como entendemos que a geolocalização do HTML5 pode obter a latitude e a longitude do usuário, o que precisamos fazer é converter latitude e longitude abstratas em informações de localização geográfica real de usuário real legais. Felizmente, os mapas Baidu e o Google Maps fornecem interfaces a esse respeito. Precisamos apenas aprovar as informações de latitude e longitude obtidas pelo HTML5 para a interface do mapa, e elas retornarão a localização geográfica do usuário, incluindo informações provinciais, municipais e regionais e até informações geográficas detalhadas, como ruas e números de casas.

Primeiro, definimos o div para exibir o local geográfico na página e definir ID#Baidu_Geo e ID#Google_Geo, respectivamente. Só precisamos modificar a principal função exibePosition (). Vamos primeiro olhar para a interação da interface do mapa do Baidu. Enviamos as informações de latitude e longitude para a interface do mapa do Baidu através do Ajax, e a interface retornará as informações provinciais, municipais e de rua correspondentes. A interface do mapa do Baidu retorna uma sequência de dados JSON e podemos exibir as informações necessárias para div#Baidu_Geo de acordo com nossas necessidades. Observe que a biblioteca jQuery é usada aqui e o arquivo da biblioteca jQuery precisa ser carregado primeiro.

1. FunctionShowPosition (posição) {
2. varlatlon = position.coords.latitude+','+position.coords.longitude;
4. // Baidu
5. varurl = http: //api.map.baidu.com/geocoder/v2/? Ak = c93b5178d7a8ebdb830b9b557abce78b & callback = renderverse e localização =+latlon+e saída = json & pois = 0;
6. $ .ajax ({
7. Tipo: Get,
8. Datatype: jsonp,
9. URL: URL,
10. beforesend: function () {
11. $ (#Baidu_Geo) .html ('localizando ...');
12. },
13. Sucesso: função (JSON) {
14. if (json.status == 0) {
15. $ (#Baidu_Geo) .html (json.result.formatted_address);
16. }
17. },
18. Erro: função (xmlhttprequest, textstatus, ertrorthrown) {
19. $ (#Baidu_Geo) .html (Latlon+Localização do endereço falhou);
20. }
21. });
22. });

Vejamos a interação da interface do Google Maps. Da mesma forma, enviamos informações de latitude e longitude para a interface do Google Maps através do Ajax, e a interface retornará a província correspondente, detalhes da cidade e da rua. A interface do Google Maps também retorna uma sequência de dados JSON. Esses dados JSON são mais detalhados do que os retornados pela interface Baidu Maps. Podemos exibir as informações necessárias para div#google_geo de acordo com nossas necessidades.

1. FunctionShowPosition (posição) {
2. varlatlon = position.coords.latitude+','+position.coords.longitude;
4. //Google
5. varurl = 'http: //maps.google.cn/maps/api/geocode/json? latlng ='+latlon+'& idioma = cn';
6. $ .ajax ({
7. Tipo: Get,
8. URL: URL,
9. beforesend: function () {
10. $ (#google_geo) .html ('localizando ...');
11. },
12. Sucesso: função (JSON) {
13. if (json.status == 'ok') {
14. varresults = json.results;
15. $ .ECH (Resultados, função (índice, Array) {
16. if (index == 0) {
17. $ (#google_geo) .html (array ['formatted_address']);
18. }
19. });
20. }
21. },
22. Erro: função (xmlhttprequest, textstatus, ertrorthrown) {
23. $ (#google_geo) .html (Latlon+Localização do endereço falhou);
24. }
25. });
26. }

O código acima integra a interface do mapa Baidu e a interface do mapa do Google na função ShowPosition (), respectivamente, e podemos chamá -la de acordo com a situação real. Obviamente, este é apenas um aplicativo simples. Podemos desenvolver muitas aplicações complexas com base neste exemplo simples. Recomenda -se usar um navegador móvel para acessar a demonstração da demonstração.