Heim >Web-Frontend >HTML-Tutorial >Wie finde ich die Position des Benutzers in HTML?
Wie finde ich die Position des Benutzers in HTML?
- 王林nach vorne
- 2023-08-20 21:45:352309Durchsuche
Manchmal besteht die Aufgabe darin, den aktuellen Standort des Benutzers zu ermitteln und dann die Standortkoordinaten auf einer Webseite oder den Standort auf einer Karte anzuzeigen. Mithilfe von HTML- und Javascript-Code demonstriert dieser Artikel den Prozess zum Ermitteln der aktuellen Position des Benutzers auf einer HTML-Seite. Demonstriert anhand zweier verschiedener Beispiele. Im ersten Beispiel können Sie den aktuellen Standort des Benutzers ermitteln und dann die Standortkoordinaten auf einer HTML-Seite anzeigen. Im zweiten Beispiel wird die Open-Source-Kartenbibliothek Leaflet verwendet, um den aktuellen Standort des Benutzers abzurufen und auf einer Karte anzuzeigen.
Beispiel 1: Ermitteln Sie den aktuellen Standort des Benutzers und zeigen Sie die Standortkoordinaten auf der HTML-Seite an.
Code-Erklärung und Entwurfsschritte −
Schritt 1 − Erstellen Sie eine HTML-Datei und beginnen Sie mit dem Schreiben von Code.
Schritt 2 – Erstellen Sie ein Etikett
und stellen Sie es so ein, dass Standortkoordinaten angezeigt werden.
Schritt 3 – Erstellen Sie eine Schaltfläche und rufen Sie die Funktion getYourLoc() auf, wenn auf die Schaltfläche geklickt wird.
Schritt 4 – Schreiben Sie Code in das <script>-Tag und erstellen Sie zwei Funktionen getYourLoc() und showMyPos(pos). </script>
Schritt 5 − Schreiben Sie den Javascript-Code in getYourLoc(), um den aktuellen Standort mithilfe von navigator.geolocation.getCurrentPosition() zu finden, und rufen Sie dann showMyPos(pos) auf.
Schritt 6 – Fügen Sie den Standort mit showMyPos(pos) zum zuvor erstellten
-Tag hinzu. Überprüfen Sie die Ergebnisse.
Wichtige verwendete Datei − locationfile.html
Die chinesische Übersetzung vonCode für parentFolderFile.html:
lautet:Der Code von 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>
Anzeigen des Ergebnisses
Um die Ergebnisse anzuzeigen, öffnen Sie die Datei loactionfile.html in Ihrem Browser. Klicken Sie nun auf die Schaltfläche, um den aktuellen Standort des Benutzers zu ermitteln. Die Koordinaten werden auf der HTML-Seite angezeigt.
Beispiel 2: Finden Sie den aktuellen Standort des Benutzers und zeigen Sie die Standortkoordinaten auf der Karte an.
Code-Erklärung und Entwurfsschritte −
Schritt 1 − Erstellen Sie eine HTML-Datei und beginnen Sie mit dem Schreiben von Code.
Schritt 2 – Erstellen Sie ein Etikett
und stellen Sie es so ein, dass Standortkoordinaten angezeigt werden.
Schritt 3 – Erstellen Sie eine Schaltfläche und rufen Sie die Funktion getYourLoc() auf, wenn auf die Schaltfläche geklickt wird.
Schritt 4 − Schreiben Sie in die
Schritt 6 - Wenn Sie die Karte in der Funktion showmap(pos) anzeigen, schließen Sie die Broschürenbibliothek ein, verwenden Sie die Basiskarte, setzen Sie die Markierung und übergeben Sie die aktuellen Standortkoordinaten, um den Kartenstandort zu markieren.
Schritt 7 – Verwenden Sie showMyPos(pos), um den Standort zum zuvor erstellten
-Tag hinzuzufügen. Zeigt auch die Karte an. Überprüfen Sie die Ergebnisse.
Wichtige verwendete Datei − locationfile11.html
Code für 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>
Anzeigen des Ergebnisses
Um das Ergebnis anzuzeigen, öffnen Sie die Datei „loactionfile11.html“ in einem Browser. Klicken Sie nun auf die Schaltfläche, um den aktuellen Standort des Benutzers zu finden. Die Koordinaten werden auf der Karte angezeigt
In diesem HTML-Artikel wird anhand von zwei verschiedenen Beispielen gezeigt, wie der aktuelle Standort des Benutzers ermittelt werden kann. Zuerst wird eine Methode eingeführt, um die Standortkoordinaten auf der Seite anzuzeigen, nachdem der Standort ermittelt wurde. Anschließend wird eine Methode eingeführt, mit der diese Koordinaten zur Anzeige auf der Karte verwendet werden, während der Standort auf der HTML-Seite angezeigt wird.Das obige ist der detaillierte Inhalt vonWie finde ich die Position des Benutzers in HTML?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!