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.
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 von<!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>
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.
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