Page d'accueil>Tutoriel de conception de sites Web>Tutoriel HTML

Comment utiliser la fonction de positionnement de la géolocalisation HTML5

Auteur：Eve Cole Date de mise à jour：2025-08-20 01:32:02

En utilisant un code JavaScript relativement simple, vous pouvez créer des applications Web qui peuvent déterminer les détails de l'emplacement géographique de l'utilisateur, y compris la latitude et la longitude et l'altitude. Certaines applications Web peuvent même fournir des fonctions de navigation en surveillant le mouvement des emplacements des utilisateurs au fil du temps, qui intègre également les systèmes MAP tels que l'API Googlemaps.

HTML5 fournit une API de géolocalisation pour déterminer l'emplacement de l'utilisateur. Nous pouvons utiliser cette fonctionnalité de HTML5 pour développer des applications en fonction des informations de géolocalisation. Cet article combine des exemples à partager avec vous comment utiliser HTML5 et utiliser les interfaces Baidu et Google Map pour obtenir des informations de localisation géographique précises des utilisateurs.

La géolocalisation est une nouvelle fonctionnalité de HTML5, il est donc possible de fonctionner sur des navigateurs modernes qui prennent en charge HTML5, en particulier des appareils portables tels que les iPhones, où la géolocalisation est plus précise. Tout d'abord, nous devons détecter si le navigateur du périphérique utilisateur prend en charge la géolocalisation et, dans l'affirmative, obtenir des informations géographiques. Notez que cette fonctionnalité peut porter atteinte à la confidentialité de l'utilisateur. À moins que le consentement de l'utilisateur ne soit, les informations de localisation de l'utilisateur sont indisponibles, donc lorsque nous accéderons à l'application, nous vous inviterons à autoriser la géolocalisation, et bien sûr, nous pouvons choisir d'autoriser.

  1. functiongetLocation () {
  2. if (navigator.geolocation) {
  3. Navigator.Geolocation.getCurrentPosition (showPosition, Showerror);
  4. }autre{
  5. alerte (le navigateur ne prend pas en charge la géolocalisation.);
  6. }
  7. }

Le code ci-dessus montre que si le périphérique utilisateur prend en charge la géolocalisation, exécutez la méthode GetCurrentPosition (). Si GetCurrentPosition () s'exécute avec succès, un objet coordonné est renvoyé à la fonction spécifiée dans la mise en vedette des paramètres. Le deuxième paramètre de la méthode GetCurrentPosition () est utilisé pour gérer l'erreur, qui spécifie la fonction qui s'exécute lorsque l'emplacement de l'utilisateur ne parvient pas.

Regardons d'abord la fonction Downsror (), qui spécifie la gestion de certains codes d'erreur lors de l'obtention de l'emplacement géographique de l'utilisateur:

  1. FunctionShowerRor (erreur) {
  2. commutateur (error.code) {
  3. CaseError.Permission_denided:
  4. alerte (l'échec de la localisation, l'utilisateur refuse de demander la géolocalisation);
  5. casser;
  6. CaseError.Position_unavailable:
  7. alerte (la localisation a échoué, les informations de localisation ne sont pas disponibles);
  8. casser;
  9. CaseError.Timeout:
  10. alerte (localisation a échoué, demandant d'obtenir un délai d'emplacement de l'utilisateur);
  11. casser;
  12. CaseError.unknown_error:
  13. alerte (l'échec de la localisation, le système de positionnement a échoué);
  14. casser;
  15. }
  16. }

Regardons la fonction showPosition () et appelons la latitude et la longitude des coords pour obtenir la latitude et la longitude de l'utilisateur.

  1. fonctionshowPosition (position) {
  2. varlat = position.coords.Latitude; // latitude
  3. varlag = position.coords.longitude; // longitude
  4. alert ('lat:' + lat + ', longitude:' + lag);
  5. }

Utilisez les interfaces Baidu Maps et Google Maps pour obtenir des adresses utilisateur

Comme nous comprenons que la géolocalisation de HTML5 peut obtenir la latitude et la longitude de l'utilisateur, ce que nous devons faire est de convertir les informations de localisation géographique réelle et de localisation réelle significative. Heureusement, les cartes Baidu et Google Maps fournissent des interfaces à cet égard. Nous n'avons qu'à transmettre les informations de latitude et de longitude obtenues par HTML5 à l'interface MAP, et elle renverra l'emplacement géographique de l'utilisateur, y compris les informations provinciales, municipales et régionales, et même des informations détaillées sur l'emplacement géographique telles que les rues et les numéros de maison.

Nous définissons d'abord le div pour afficher l'emplacement géographique sur la page et définissons respectivement l'ID # baidu_geo et id # google_geo. Nous avons juste besoin de modifier la fonction Key Fonction ShowPosition (). Examinons d'abord l'interaction d'interface Baidu Map. Nous envoyons les informations de latitude et de longitude à l'interface de carte Baidu via Ajax, et l'interface renverra les informations provinciales, municipales et de rue correspondantes. L'interface Baidu Map Renvoie une chaîne de données JSON, et nous pouvons afficher les informations requises pour Div # baidu_geo en fonction de nos besoins. Notez que la bibliothèque JQuery est utilisée ici et que le fichier de bibliothèque JQuery doit être chargé en premier.

  1. fonctionshowPosition (position) {
  2. varlatlon = position.coords.Latitude + ',' + position.coords.longitude;
  4. // baidu
  5. varurl = http: //api.map.baidu.com/geocoder/v2/? ak = c93b5178d7a8ebdb830b9b557abce78b & callback = renderReverse & location = + latlon + & output = json & pois = 0;
  6. $ .ajax ({
  7. Type: Get,
  8. Type de données: JSONP,
  9. URL: URL,
  10. beforesend: function () {
  11. $ (# baidu_geo) .html ('localiser ...');
  12. },
  13. Succès: fonction (JSON) {
  14. if (json.status == 0) {
  15. $ (# baidu_geo) .html (json.result.formatted_address);
  16. }
  17. },
  18. Erreur: fonction (xmlHttpRequest, TextStatus, Errorthrown) {
  19. $ (# baidu_geo) .html (latlon + l'emplacement d'adresse a échoué);
  20. }
  21. });
  22. });

Examinons l'interaction interface Google Maps. De même, nous envoyons des informations de latitude et de longitude à l'interface Google Maps via Ajax, et l'interface renverra les détails de la province, de la ville et de la rue correspondants. L'interface Google Maps renvoie également une chaîne de données JSON. Ces données JSON sont plus détaillées que celles renvoyées par l'interface Baidu Maps. Nous pouvons afficher les informations requises pour Div # Google_Geo en fonction de nos besoins.

  1. fonctionshowPosition (position) {
  2. varlatlon = position.coords.Latitude + ',' + position.coords.longitude;
  4. //Google
  5. varurl = 'http: //maps.google.cn/maps/api/geocode/json? latlng =' + latlon + '& linguisse = cn';
  6. $ .ajax ({
  7. Type: Get,
  8. URL: URL,
  9. beforesend: function () {
  10. $ (# google_geo) .html ('localiser ...');
  11. },
  12. Succès: fonction (JSON) {
  13. if (json.status == 'ok') {
  14. varresults = json.results;
  15. $ .each (résultats, fonction (index, array) {
  16. if (index == 0) {
  17. $ (# google_geo) .html (array ['formatted_address']);
  18. }
  19. });
  20. }
  21. },
  22. Erreur: fonction (xmlHttpRequest, TextStatus, Errorthrown) {
  23. $ (# google_geo) .html (latlon + emplacement d'adresse a échoué);
  24. }
  25. });
  26. }

Le code ci-dessus intègre respectivement l'interface MAP BAIDU et l'interface de la carte Google dans la fonction de fonction (), et nous pouvons l'appeler selon la situation réelle. Bien sûr, ce n'est qu'une simple application. Nous pouvons développer de nombreuses applications complexes en fonction de cet exemple simple. Il est recommandé d'utiliser un navigateur mobile pour accéder à la démonstration de démonstration.

Articles connexes