GL mapbox中的多点方向绘制

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 插件出错。

这是带有新版本的代码的working jsfiddle（v2.2.0 of mapbox-gl-directions 插件和v0.22.1 of mapbox-gl-js）

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.
});