Comment localiser la position de l'utilisateur en HTML ?-tutoriel HTML-php.cn

Comment localiser la position de lutilisateur en HTML ?

Parfois, la tâche consiste à trouver l'emplacement actuel de l'utilisateur, puis à afficher les coordonnées de l'emplacement sur une page Web ou à afficher l'emplacement sur une carte. À l'aide de code HTML et javascript, cet article montre le processus permettant d'obtenir l'emplacement actuel de l'utilisateur dans une page HTML. Démontré en utilisant deux exemples différents. Dans le premier exemple, vous pouvez obtenir l'emplacement actuel de l'utilisateur, puis afficher les coordonnées de l'emplacement sur une page HTML. Dans le deuxième exemple, la bibliothèque de cartes open source Leaflet est utilisée pour obtenir et afficher la position actuelle de l'utilisateur sur une carte.

Exemple 1 : Recherchez l'emplacement actuel de l'utilisateur et affichez les coordonnées de l'emplacement sur la page html.

Explication du code et étapes de conception −

Étape 1 - Créez un fichier HTML et commencez à écrire du code.

Étape 2 - Créez une étiquette

et configurez-la pour afficher les coordonnées de localisation.

Étape 3 - Créez un bouton et appelez la fonction getYourLoc() lorsque vous cliquez sur le bouton.

Étape 4 - Écrivez du code dans la balise <script> et créez deux fonctions getYourLoc() et showMyPos(pos). </script>

Étape 5 - Écrivez le code javascript dans getYourLoc() pour trouver l'emplacement actuel à l'aide de navigator.geolocation.getCurrentPosition(), puis appelez showMyPos(pos).

Étape 6 - Ajoutez l'emplacement à la balise

précédemment créée en utilisant showMyPos(pos). Vérifiez les résultats.

Fichier important utilisé − locationfile.html

La traduction chinoise de

Code For parentFolderFile.html:

est :

Le code de parentFolderFile.html:

<!DOCTYPE html>
<html>
   <body>
      <p>Show My Location Coordinates</p>
      <button onclick="getYourLoc()">Get the location coordinates</button>
      <p id="showloc"></p> 
      <script>
      var x = document.getElementById("showloc");
      function getYourLoc() {
         if (navigator.geolocation) {
            navigator.geolocation.getCurrentPosition(showMyPos);
         } else {
            x.innerHTML = "No support for this in the browser.";
         }
      }
      function showMyPos(pos) {
         x.innerHTML = "My Latitude is : " + pos.coords.latitude +
         "<br>My Longitude is : " + pos.coords.longitude;
      }
      </script>
   </body>
</html>

Copier après la connexion

Affichage du résultat

Pour voir les résultats, ouvrez le fichier loactionfile.html dans votre navigateur. Cliquez maintenant sur le bouton pour trouver l'emplacement actuel de l'utilisateur. Les coordonnées seront affichées sur la page html.