Maison > Article > interface Web > Comment localiser la position de l'utilisateur en HTML ?
Comment localiser la position de l'utilisateur en HTML ?
- 王林avant
- 2023-08-20 21:45:352259parcourir
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 deCode 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>
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 <script>, écrivez le code et créez trois fonctions getYourLoc() , showMyPos(pos) et showmap(pos).</script>
Étape 5 - Écrivez le code javascript dans getYourLoc() pour trouver l'emplacement actuel à l'aide de navigator.geolocation.getCurrentPosition(), puis appelez les fonctions showMyPos(pos) et showmap(pos).
Étape 6 - Lors de l'affichage de la carte dans la fonction showmap(pos), incluez la bibliothèque de dépliants, utilisez la carte de base, définissez le marqueur et transmettez les coordonnées de l'emplacement actuel pour marquer l'emplacement de la carte.
Étape 7 - Utilisez showMyPos(pos) pour ajouter l'emplacement à la balise
précédemment créée. Affiche également la carte. Vérifiez les résultats.
Fichier important utilisé − locationfile11.html
Code pour locationfile11.html :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Leaflet Map</title>
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.6.0/dist/leaflet.css" integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ==" crossorigin="" />
<style type="text/css">
body{
margin: 0;
padding: 0;
}
#map {
width: 100vw;
height: 100vh;
}
</style>
</head>
<body>
<p>Show My Location Coordinates</p>
<button onclick="getYourLoc()">Get the location coordinates</button>
<p id="showloc"></p>
<div id="map"></div>
// the leaflet library for making maps
<script src="https://unpkg.com/leaflet@1.6.0/dist/leaflet.js" integrity="sha512-gZwIG9x3wUXg2hdXF6+rVkLF/0Vi9U8D2Ntg4Ga5I5BZpVkVxlJWbSQtXPSiUTtC0TjtGOmxa1AJPuV0CPthew==" crossorigin=""></script>
<script>
var x = document.getElementById("showloc");
// get the current location of the user
function getYourLoc() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(showMyPos);
} else {
x.innerHTML = "No support for this in the browser.";
}
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(showmap);
} else {
x.innerHTML = "No map here.";
}
}
function showMyPos(pos) {
var lat=pos.coords.latitude;
var lon=pos.coords.longitude;
x.innerHTML = "My Latitude is : " + lat +
"<br>My Longitude is : " + lon;
}
function showmap(pos){
var latc=pos.coords.latitude;
var lonc=pos.coords.longitude;
const map = L.map('map', {
center: [latc, lonc],
zoom: 3
});
//Adding a base map
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors' }).addTo(map);
const marker1 = L.marker([latc, lonc]).addTo(map);
}
</script>
</body>
</html>
Affichage du résultat
Pour voir le résultat, ouvrez le fichier loactionfile11.html dans un navigateur. Cliquez maintenant sur le bouton pour trouver l'emplacement actuel de l'utilisateur. Les coordonnées sont vues et marquées sur la carte.
Dans cet article HTML, deux exemples différents sont utilisés pour montrer comment trouver l'emplacement actuel de l'utilisateur. Tout d'abord, une méthode est introduite pour afficher les coordonnées de l'emplacement sur la page après avoir obtenu l'emplacement, puis une méthode d'utilisation de ces coordonnées pour les afficher sur la carte tout en affichant l'emplacement dans la page HTML est introduite.
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!