Mapbox GL Directions - mapboxgl.Directions 不是构造函数

Question

我在 rails 应用程序上遇到 mapbox 方向插件的问题。当我加载地图所在的页面时，出现此错误：

Uncaught TypeError: mapboxgl.Directions is not a constructor
    at HTMLDocument.<anonymous> (travel.self-10030a4….js?body=1:34)
    at fire (jquery.self-bd7ddd3….js?body=1:3233)
    at Object.fireWith [as resolveWith] (jquery.self-bd7ddd3….js?body=1:3363)
    at Function.ready (jquery.self-bd7ddd3….js?body=1:3583)
    at HTMLDocument.completed (jquery.self-bd7ddd3….js?body=1:3618)

这是我的地图的代码：

var map;
var directions;

// token access for MAPBOX GL
mapboxgl.accessToken = 'pk.eyJ1IjoiYW50b3RvIiwiYSI6ImNpdm15YmNwNTAwMDUyb3FwbzlzeWluZHcifQ.r44fcNU5pnX3-mYYM495Fw';

// generate map
var map = new mapboxgl.Map({
  container: 'map',
  style: 'mapbox://styles/mapbox/streets-v10',
  center: [-96, 37.8],
  zoom: 5
});

// center map on selected marker
map.on('click', 'markers', function (e) {
    map.flyTo({center: e.features[0].geometry.coordinates});
});

// change mouse action on enter / leave in marker
map.on('mouseenter', 'markers', function () {
    map.getCanvas().style.cursor = 'pointer';
});
map.on('mouseleave', 'markers', function () {
    map.getCanvas().style.cursor = '';
});

// Directions
var directions = new mapboxgl.Directions({
    unit: 'metric',
    profile: 'driving',
    container: 'directions'
});

$.ajax({
    dataType: 'json',
    url: grabTravelData(),
    success: function(data) {
        geojson = data;
        map.addSource("markers", {
            "type": "geojson",
            "data": {
                "type": "FeatureCollection",
                "features": data
            }
        });
        map.addLayer({
            "id": "markers",
            "type": "circle",
            "source": "markers",
            "paint": {
                "circle-radius": 7,
                "circle-color": "#ff7e5f"
            },
        });
        // center map on markers
        var bounds = new mapboxgl.LngLatBounds();
        data.forEach(function(feature) {
            bounds.extend(feature.geometry.coordinates);
        });
        map.fitBounds(bounds);

        // test - set direction for each marker to following marker
        for(var i = 0; i < data.lenght; i++) {
            var last = data.length - 1
            var from = data[i];
            var to = data[i + 1];
            directions.setOrigin(from);
            if(to != from) {
                directions.setDestination(to);
            } else {
                directions.setDestination(from);
            }

        }

    }, error: function(data) {
        console.log(data + ' error');
    }
});

在此代码中，使用 for 循环，我尝试使用以下标记在每个标记之间创建一条路线。

在我导入 mapbox 的应用程序的 header 中：

<script src='https://api.mapbox.com/mapbox-gl-js/v0.37.0/mapbox-gl.js'></script>
<link href='https://api.mapbox.com/mapbox-gl-js/v0.37.0/mapbox-gl.css' rel='stylesheet' />
<script src="https://cdn.jsdelivr.net/places.js/1/places.min.js"></script>
<script src='https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-directions/v3.1.1/mapbox-gl-directions.js'></script>
<link rel='stylesheet' href='https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-directions/v3.1.1/mapbox-gl-directions.css' type='text/css' />

有人知道这是什么错误吗？

Answer 1

使用 Mapbox GL 方向的正确方法是

var directions = new MapboxDirections({
  accessToken: 'YOUR-MAPBOX-ACCESS-TOKEN',
  unit: 'metric',
  profile: 'cycling'
});

map.addControl(directions);

有关详细信息，请参阅 API Documentation

Mapbox GL Directions - mapboxgl.Directions 不是构造函数

Mapbox GL Directions - mapboxgl.Directions is not a constructor

ruby-on-rails

mapbox

mapbox-gl