Wegbeschreibungen anzeigen: Ich verwende das Mapbox-GL-Direcitons-Plugin, um Ergebnisse der Mapbox Directions API anzuzeigen. Eine vollständige Referenz findest du unter API.md. Nachfolgend ein einfaches Beispiel:
Zunächst der Programmcode:
<!-- https://raw.githubusercontent.com/astridx/mapboxexamples/master/plugins/mapbox-gl-directions.html -->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Display driving directions</title>
<meta
name="viewport"
content="initial-scale=1,maximum-scale=1,user-scalable=no"
/>
<script src="https://api.mapbox.com/mapbox-gl-js/v1.12.0/mapbox-gl.js"></script>
<link
href="https://api.mapbox.com/mapbox-gl-js/v1.12.0/mapbox-gl.css"
rel="stylesheet"
/>
<style>
body {
margin: 0;
padding: 0;
}
#map {
position: absolute;
top: 0;
bottom: 0;
width: 100%;
}
</style>
</head>
<body>
<script src="https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-directions/v4.1.0/mapbox-gl-directions.js"></script>
<link
rel="stylesheet"
href="https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-directions/v4.1.0/mapbox-gl-directions.css"
type="text/css"
/>
<div id="map"></div>
<script>
mapboxgl.accessToken = '<Zugriffstoken>'
new MapboxDirections({
accessToken: this.accessToken,
unit: 'metric',
profile: 'mapbox/driving',
flyTo: false,
controls: {
inputs: false,
instructions: true,
profileSwitcher: false,
},
exclude: 'ferry',
})
var map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/mapbox/streets-v11',
center: [-4.488582, 36.86133],
zoom: 15,
})
var directions = new MapboxDirections({
accessToken: mapboxgl.accessToken,
language: 'de-DE',
steps: true,
exclude: 'toll',
unit: 'metric',
interactive: false,
controls: 'true',
profile: 'mapbox/driving',
flyTo: false,
})
var marker1 = new mapboxgl.Marker()
.setLngLat([1.81108, 47.069302])
.addTo(map)
var marker2 = new mapboxgl.Marker()
.setLngLat([-0.610723, 43.185493])
.addTo(map)
var marker3 = new mapboxgl.Marker()
.setLngLat([-3.479979, 39.819714])
.addTo(map)
// Jeden Zwischenschritt abfragen
/* directions.on('route', e => {
let routes = e.route
routes.map(r => r.legs[0].steps[0].name)
tail = routes.map(r => r.legs[0].steps)
var i;
for (i = 0; i < tail[0].length; i++) {
console.log(
i + ': ' + tail[0][i].maneuver.location[0] + '---' + tail[0][i].maneuver.location[1]
);
}
});*/
this.map.on('load', () => {
showRoute()
})
function showRoute() {
directions.setOrigin('kehrig')
directions.setDestination('-4.488582, 36.861330')
// Webpunkte hinzufügen
// directions.addWaypoint(1, [-1.497526, 43.307164]);
}
map.addControl(directions, 'top-left')
</script>
</body>
</html>Ich gebe zwei Koordinaten ein. Die Mapbox Directions-API gibt ein JSON-Objekt zurück, das eine Route mit Reisedauer, geschätzten Entfernungen und Turn-by-Turn-Anweisungen enthält. Bei Verwendung des Mapbox GL Directions-Plugins werden alle diese Informationen automatisch zur Karte hinzugefügt, wenn eine Anforderung abgeschlossen ist.
Nachfolgend zeige ich eine kurze JSON-Rohantwort an, um zu veranschaulichen, welche Informationen im Richtungsantwortobjekt enthalten sind.
[
{
"geometry": "m~zqHwnbk@UhCoCt@G@",
"legs": [
{
"summary": "Veilchenhang, Sonnenhang",
"weight": 50.1,
"duration": 47.4,
"steps": [
{
"intersections": [
{
"out": 0,
"entry": [true],
"bearings": [284],
"location": [7.226839, 50.278312]
}
],
"driving_side": "right",
"geometry": "m~zqHwnbk@UhC",
"mode": "driving",
"maneuver": {
"bearing_after": 284,
"bearing_before": 0,
"location": [7.226839, 50.278312],
"type": "depart",
"instruction": "Head west on Veilchenhang"
},
"weight": 21.5,
"duration": 18.8,
"name": "Veilchenhang",
"distance": 50.8
},
{
"intersections": [
{
"out": 2,
"in": 0,
"entry": [false, true, true],
"bearings": [105, 195, 345],
"location": [7.226145, 50.278421]
}
],
"driving_side": "right",
"geometry": "c_{qHmjbk@oCt@G@",
"mode": "driving",
"maneuver": {
"bearing_after": 345,
"bearing_before": 282,
"location": [7.226145, 50.278421],
"modifier": "right",
"type": "turn",
"instruction": "Turn right onto Sonnenhang"
},
"weight": 28.6,
"duration": 28.6,
"name": "Sonnenhang",
"distance": 87
},
{
"intersections": [
{
"in": 0,
"entry": [true],
"bearings": [169],
"location": [7.225868, 50.279183]
}
],
"driving_side": "right",
"geometry": "{c{qHuhbk@",
"mode": "driving",
"maneuver": {
"bearing_after": 0,
"bearing_before": 349,
"location": [7.225868, 50.279183],
"type": "arrive",
"instruction": "You have arrived at your destination"
},
"weight": 0,
"duration": 0,
"name": "Sonnenhang",
"distance": 0
}
],
"distance": 137.8
}
],
"weight_name": "routability",
"weight": 50.1,
"duration": 47.4,
"distance": 137.8
}
]Das Richtungsobjekt ist beispielsweise mit folgendem Code manipulierbar.
directions.on('route', (e) => {
let routes = e.route
routes.map((r) => r.legs[0].steps[0].name)
tail = routes.map((r) => r.legs[0].steps)
var i
for (i = 0; i < tail[0].length; i++) {
console.log(
i +
': ' +
tail[0][i].maneuver.location[0] +
'---' +
tail[0][i].maneuver.location[1]
)
}
})Ein Marker kann wie gewohnt zur Karte hinzugefügt werden.
var marker3 = new mapboxgl.Marker().setLngLat([-3.479979, 39.819714]).addTo(map)Soll die Koordinate des Markers als Zwischenziel verwendet werden, ist das Hinzufügen von directions.addWaypoint(1, [-3.479979, 39.819714]); erforderlich.
Demo
Quellcode
Gatsby Starter mit dieser Funktion - Gatsby Starter Demo
Mapbox GL Dokumentation
Mapbox GL Directions plugin
Webmentions