简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Maison > interface Web > tutoriel HTML > le corps du texte

Comment localiser la position de l'utilisateur en HTML ?

王林
Libérer： 2023-08-20 21:45:35
avant
2258 Les gens l'ont consulté

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.

Exemple 2 : recherchez l'emplacement actuel de l'utilisateur et affichez les coordonnées de l'emplacement sur la carte.

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 - À l'intérieur des balises

Tutoriels populaires
Plus>
Tutoriels associés
Recommandations populaires
Derniers cours
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois：Formation PHP en ligne sur le bien-être public，Aidez les apprenants PHP à grandir rapidement！