Guten Tag, Freunde!
In diesem kleinen Tutorial werden wir zusammen mit Ihnen drei einfache Aufgaben erledigen:
- Bestimmen Sie mithilfe der Geolocation-API und von Leaflet.js den aktuellen Standort des Benutzers und zeigen Sie ihn auf der Karte an
- Wir implementieren einen animierten Übergang zwischen Städten
- Wir implementieren das Umschalten zwischen Adressen mit vorläufiger Ermittlung des Objektnamens und seiner Koordinaten
Der Projektcode ist hier .
Sie können hier mit dem Code spielen:
Bestimmen Sie den aktuellen Standort des Benutzers
Mit der Geolocation-API kann der Benutzer einer Webanwendung ihre Standortdaten bereitstellen. Die Anwendung verwendet die Methode Geolocation.getCurrentPosition () , um diese Daten anzufordern . Diese Methode verwendet einen erforderlichen und zwei optionale Parameter: Erfolg ist eine Rückruffunktion, die ein Positionsobjekt empfängt, wenn die Berechtigung erteilt wird, Fehler ist eine Rückruffunktion, die ein PositionError-Objekt empfängt, wenn der Zugriff verweigert wird, und Optionen ist ein Einstellungsobjekt. So sieht es im Code aus:
navigator.geolocation.getCurrentPosition(success, error, {
//
enableHighAccuracy: true
})
function success({ coords }) {
//
const { latitude, longitude } = coords
const position = [latitude, longitude]
console.log(position) // [, ]
}
function error({ message }) {
console.log(message) // PositionError: User denied Geolocation
}
Anzeigen des Standorts des Benutzers auf der Karte
Wir werden Leaflet.js als Karte verwenden . Dieser Dienst ist eine Alternative zu Google Maps und OpenStreetMap, die in ihrer Funktionalität schlechter ist, aber durch die Einfachheit der Benutzeroberfläche besticht. Wir erstellen ein Markup, in dem wir die Stile und das Kartenskript verbinden:
<head>
<!-- -->
<link
rel="stylesheet"
href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css"
integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A=="
crossorigin=""
/>
<!-- -->
<script
src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"
integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA=="
crossorigin=""
></script>
<!-- -->
<link rel="stylesheet" href="style.css" />
</head>
<body>
<!-- -->
<div id="map"></div>
<!-- -->
<button id="my_position">My Position</button>
<!-- - -->
<script src="script.js" type="module"></script>
</body>
Fügen Sie minimale Stile hinzu (style.css):
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
min-height: 100vh;
display: grid;
place-content: center;
place-items: center;
background-color: rgb(241, 241, 241);
}
#map {
width: 480px;
height: 320px;
border-radius: 4px;
box-shadow: 0 0 1px #222;
}
button {
padding: 0.25em 0.75em;
margin: 1em 0.5em;
cursor: pointer;
user-select: none;
}
Erstellen Sie ein map.js-Modul mit folgendem Inhalt:
//
//
let map = null
let marker = null
// -
// , (tooltip)
export function getMap(position, tooltip) {
//
if (map === null) {
// , setView - (zoom)
map = L.map('map').setView(position, 15)
} else return
// -
//
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution:
'© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map)
//
L.marker(position).addTo(map).bindPopup(tooltip).openPopup()
}
Schließlich erstellen wir script.js:
//
import { getMap } from './map.js'
//
document.getElementById('my_position').onclick = () => {
navigator.geolocation.getCurrentPosition(success, error, {
enableHighAccuracy: true
})
}
function success({ coords }) {
const { latitude, longitude } = coords
const currentPosition = [latitude, longitude]
// ,
getMap(currentPosition, 'You are here')
}
function error({ message }) {
console.log(message)
}
Öffnen Sie index.html in einem Browser, klicken Sie auf die Schaltfläche, erteilen Sie die Berechtigung zum Empfangen von Standortdaten und sehen Sie sich unsere Position auf der Karte an.
Fein. Weitermachen.
Animierter Übergang zwischen Städten
Angenommen, wir haben ein Objekt mit drei Städten (Moskau, St. Petersburg, Jekaterinburg) und ihren Koordinaten (db / citys.json):
{
"Moscow": {
"lat": "55.7522200",
"lon": "37.6155600"
},
"Saint-Petersburg": {
"lat": "59.9386300",
"lon": "30.3141300"
},
"Ekaterinburg": {
"lat": "56.8519000",
"lon": "60.6122000"
}
}
Wir müssen einen reibungslosen Wechsel zwischen diesen Städten auf der Karte implementieren.
Fügen Sie dem Markup einen Container für Städte hinzu:
<div id="cities"></div>
Umschreiben von script.js:
import { getMap } from './map.js'
//
const $cities = document.getElementById('cities')
;(async () => {
//
const response = await fetch('./db/cities.json')
const cities = await response.json()
//
for (const city in cities) {
//
const $button = document.createElement('button')
// -
$button.textContent = city
//
const { lat, lon } = cities[city]
// ,
// data-
$button.dataset.city = city
$button.dataset.lat = lat
$button.dataset.lon = lon
//
$cities.append($button)
}
})()
//
$cities.addEventListener('click', ({ target }) => {
//
if (target.tagName !== 'BUTTON') return
// , data-
const { city, lat, lon } = target.dataset
const position = [lat, lon]
// ,
getMap(position, city)
})
Lassen Sie uns auch map.js ein wenig ändern:
let map = null
let marker = null
export function getMap(position, tooltip) {
if (map === null) {
map = L.map('map').setView(position, 15)
} else {
//
map.flyTo(position)
}
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution:
'© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map)
//
if (marker) {
map.removeLayer(marker)
}
marker = new L.Marker(position).addTo(map).bindPopup(tooltip).openPopup()
}
Öffnen Sie index.html. Wenn Sie den ersten Knopf drücken, erhalten wir sofort die Position und den Namen der Stadt. Wenn Sie die zweite und die folgenden Tasten drücken, bewegen wir uns reibungslos zwischen den Städten.
Reibungsloses Umschalten zwischen Adressen
Angenommen, wir haben drei Objekte mit Namen und Adressen (db / address.json):
{
" ": " , 2",
" ": " , 46",
"-": " , 97"
}
Wir müssen das Umschalten zwischen diesen Objekten auf der Karte implementieren. Aber wie können wir das ohne Koordinaten machen? Auf keinen Fall. Deshalb müssen wir diese Koordinaten irgendwie bekommen. Dazu verwenden wir den Nominatim- Service von OpenStreetMap. Informationen zum korrekten Erstellen einer Abfragezeichenfolge finden Sie hier . Ich werde nur eine der möglichen Optionen demonstrieren.
Also erstellen wir einen Container für Adressen im Markup:
<div id="addresses"></div>
Umschreiben von script.js:
//
const $addresses = document.getElementById('addresses')
;(async () => {
//
const response = await fetch('./db/addresses.json')
const addresses = await response.json()
//
for (const place in addresses) {
//
const $button = document.createElement('button')
$button.textContent = place
//
const address = addresses[place]
//
const query = address.replace(
/([--]+)\s([--]+),\s([0-9--]+)/,
'$3+$1+$2,+'
)
// , , 2++,+
// data-
$button.dataset.address = address
$button.dataset.query = query
$addresses.append($button)
}
})()
//
$addresses.addEventListener('click', async ({ target }) => {
if (target.tagName !== 'BUTTON') return
// data-
const { address, query } = target.dataset
//
const response = await fetch(
`https://nominatim.openstreetmap.org/search?q=${query}&format=json&limit=1`
)
// format - , limit -
// ,
const { display_name, lat, lon } = (await response.json())[0]
//
const name = display_name.match(/[--\s(«\-»)]+/)[0]
const position = [lat, lon]
//
const tooltip = `${name}<br>${address}`
//
getMap(position, tooltip)
})
Öffnen Sie index.html. Wenn Sie den ersten Knopf drücken, erhalten wir sofort die Position und den Namen des Theaters. Wenn Sie die zweite und die folgenden Tasten drücken, bewegen wir uns reibungslos zwischen den Kinos.
Cool. Alles funktioniert wie erwartet.
Lassen Sie mich diesbezüglich Abschied nehmen. Ich hoffe, Sie haben etwas Interessantes für sich gefunden. Vielen Dank für Ihre Aufmerksamkeit und einen schönen Tag.