如何使用 mapbox-gl-directions 设置起点和终点？

Question

我正在使用 Mapbox 集成到 javascript/php 项目中。到目前为止，一切都很好。效果很好。环顾他们的 api，我想知道是否可以混合使用 mapbox-gl-directions 和 mapbox-directions api. They don't seem to be the same thing.I really like the example from mapbox-gl-directions，这让用户可以在驾车、骑自行车和步行之间选择 select。但是我已经有了起点坐标和终点坐标。我不一定需要用户输入这些坐标，但我也想让用户可以选择输入其他坐标，如果他愿意的话。如何像 mapbox-directions-api 一样将起点和终点添加到 mapbox-gl-directions？我在他们的文档中到处都看过。

mapbox-gl-directions :

<!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.6.1/mapbox-gl.js"></script>
<link href="https://api.mapbox.com/mapbox-gl-js/v1.6.1/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.0.2/mapbox-gl-directions.js"></script>
<link
    rel="stylesheet"
    href="https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-directions/v4.0.2/mapbox-gl-directions.css"
    type="text/css"
/>
<div id="map"></div>

<script>
    mapboxgl.accessToken = 'pk.eyJ1Ijoid2ViYjI0aCIsImEiOiJjazU3a2lkbW4wNGJrM2RvNnNrNnBzbGlxIn0.GGnF34IsMQyqKNoam241tA';
    var map = new mapboxgl.Map({
        container: 'map',
        style: 'mapbox://styles/mapbox/streets-v11',
        center: [-79.4512, 43.6568],
        zoom: 13
    });

    map.addControl(
        new MapboxDirections({
            accessToken: mapboxgl.accessToken
        }),
        'top-left'
    );
</script>

</body>
</html>

Answer 1

转

map.addControl(
    new MapboxDirections({
        accessToken: mapboxgl.accessToken
    }),
    'top-left'
);

进入

var directions = new MapboxDirections({
        accessToken: mapboxgl.accessToken
    });

map.addControl(directions,'top-left');

map.on('load',  function() {
    directions.setOrigin([12, 23]); // can be address in form setOrigin("12, Elm Street, NY")
    directions.setDestinaion([11, 22]); // can be address
})

如何使用 mapbox-gl-directions 设置起点和终点？

How to set origin and destination with mapbox-gl-directions?

javascript

leaflet

mapbox-gl-js