获取错误this._mapboxgl.使用地理编码器时，标记不是构造函数

Question

我有一个相当基本的设置来测试地理编码搜索功能，但是每当搜索完成时我都会收到此错误。

我已经检查了我的版本号，据我所知它们是最新的。我已经将它们解绑以测试不同的版本。

https://api.mapbox.com/mapbox-gl-js/v1.2.0/mapbox-gl.js

https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v4.4.1/mapbox-gl-geocoder.min.js

import Mapbox from 'mapbox-gl';
import Geocoder from 'mapbox-gl-geocoder';
Mapbox.accessToken = 'pk.mytokenishere';
let map = new Mapbox.Map({
container: 'map',
style: 'mapbox://styles/mapbox/streets-v11',
center: {lon: -113.8116, lat: 52.26682},
zoom: 4
});
var geocoder = new Geocoder({
accessToken: Mapbox.accessToken,
mapboxgl: map,
marker: {
color: 'orange'
},
}); 
document.getElementById('geocoder').appendChild(geocoder.onAdd(map));

我得到的不是橙色标记，而是this._mapboxgl。标记不是构造函数

Answer 1

我能够自己弄清楚。地理编码器需要 Mapbox 类本身，而不是实例。上面的代码应更改为：

var geocoder = new Geocoder({
accessToken: Mapbox.accessToken,
mapboxgl: Mapbox,
marker: {
color: 'orange'
},
}); 

Answer 2

我在 angular 和 TS 上遇到了同样的错误，我通过省略 mapboxgl 解决了它。

就我而言，因为我使用角度：

const geocoder = new MapboxGeocoder({
accessToken: mapboxgl.accessToken,
marker: new mapboxgl.Marker({
color: 'orange'
}),
})