在GL地图框中绘制多点方向

Question

我已经在gl mapbox中绘制了超过2个公园的方向。我已经尝试这个代码，但不完美的工作。

 mapboxgl.accessToken = 'pk.eyJ1IjoiYWNoYWxwcmFqYXBhdGkiLCJhIjoiY2lyNGkwZGsxMDFpenUybHd5bjRtMjVjeiJ9.2teTa5MmVqOW-MDpryv56w';
            var map = new mapboxgl.Map({
                container: 'map',
                style: 'mapbox://styles/achalprajapati/cis1byfch0008hgnitiwbym9c',
                center: [-122.222461, 37.172263],
                zoom: 8
            });
            var directions = new mapboxgl.Directions({
                unit: 'metric', // Use the metric system to display distances.
                profile: 'walking', // Set the initial profile to walking.
                container: 'directions', // Specify an element thats not the map container.
               // proximity: [-122.222453, 37.172271] // Give search results closer to these coordinates higher priority.
            });
            debugger;
            //map.addControl(new mapboxgl.Directions());
            //map.addControl(directions);

            map.on('load', function () {
                directions.setOrigin([-122.222461, 37.172263]);
                directions.addWaypoint(0, [-122.222461, 37.172263]);
                directions.addWaypoint(1, [-122.483318, 37.724502]);
                directions.setDestination([-122.483318, 37.724502]);
            });
            directions.on('route', function (e) {
                console.log(e.route); // Logs the current route shown in the interface.
            });

Answer 1

在最近的mapbox-gl-js更新中有一个重大的变化，导致mapbox-gl-directions插件出错。

下面是使用新版本(mapbox-gl-directions插件v2.2.0和mapbox-gl-js v0.22.1)的代码的工作示例

mapboxgl.accessToken = 'pk.eyJ1IjoiYWNoYWxwcmFqYXBhdGkiLCJhIjoiY2lyNGkwZGsxMDFpenUybHd5bjRtMjVjeiJ9.2teTa5MmVqOW-MDpryv56w';
var map = new mapboxgl.Map({
    container: 'map',
    style: 'mapbox://styles/achalprajapati/cis1byfch0008hgnitiwbym9c',
    center: [-122.222461, 37.172263],
    zoom: 8
});
var directions = new mapboxgl.Directions({
    unit: 'metric', // Use the metric system to display distances.
    profile: 'walking', // Set the initial profile to walking.
    container: 'directions', // Specify an element thats not the map container.
});
map.addControl(directions)
map.on('load', function () {
    directions.setOrigin([-122.222461, 37.172263]);
    directions.addWaypoint(0, [-122.222461, 37.172263]);
    directions.addWaypoint(1, [-122.483318, 37.724502]);
    directions.setDestination([-122.483318, 37.724502]);
});
directions.on('route', function (e) {
    console.log(e.route); // Logs the current route shown in the interface.
});