In dieser Anleitung erfahren Sie, wie Sie mithilfe der Leaflet-Bibliothek eine interaktive mobile Kartenansicht erstellen klönnen, die den aktuellen Standort Ihres Browsers nutzt. Wir werden Schritt für Schritt durch den Prozess gehen, um eine Karte einzubetten, den Standort abzurufen und einen Marker an der aktuellen Position zu platzieren.
Schritt 1: Einbindung der erforderlichen Ressourcen
Um loszulegen, müsste Sie die Leaflet-Bibliothek in Ihr HTML-Dokument einbinden. Hier ist der Code, den Sie im <head>-Bereich Ihres HTML-Dokuments einfügen:
1<head>
2 ...
3 <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
4</head>
5<body>
6 ...
7 <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
8</body>Schritt 2: HTML-Struktur
Erstellen Sie ein HTML-Element, das als Container für Ihre Karte dient. Hier ist ein Beispiel:
1<div id="map" style="height: 400px;"></div>Step 3: JavaScript Code
Fügen Sie den folgenden JavaScript-Code unterhalb des HTML-Elements ein, um die Karte zu initialisieren, den Standort abzurufen und einen Marker hinzuzufügen:
1<script>
2 const map = L.map('map').setView([0, 0], 15);
3
4 L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
5 maxZoom: 19,
6 attribution: '© OpenStreetMap contributors'
7 }).addTo(map);
8
9 map.locate({ setView: true, maxZoom: 15 });
10
11 function onLocationFound(e) {
12 var marker = L.marker(e.latlng).addTo(map);
13 marker.bindPopup("You are here!").openPopup();
14 }
15
16 map.on('locationfound', onLocationFound);
17
18 function onLocationError(e) {
19 alert("Your location could not be found.");
20 }
21
22 map.on('locationerror', onLocationError);
23</script>Zusammenfassung
Herzlichen Glückwunsch! Sie haben erfolgreich eine mobile Kartenansicht erstellt, die den Standort Ihres Browsers nutzt und einen Marker an Ihrer aktuellen Position platziert. Dies ist eine Grundlage, auf der Sie weitere Funktionen und Anpassungen aufbauen können, um Ihre Kartenansicht noch interaktiver zu gestalten.
Bonus
Mit der Option watch, wird der Standort regelmäßig geupdatet.
map.locate({watch: true})
