Mapbox JS SDK 地理编码客户端未定义

Question

我正在尝试使用 Mapbox JavaScript SDK 从 VueJS 应用程序进行前向地理编码。我正在关注this tutorial，但不知道如何访问 Mapbox 客户端。

我的进口：

import mapboxgl from 'mapbox-gl';
import mapboxSdk from '@mapbox/mapbox-sdk';

然后在mounted:

mapboxgl.accessToken = this.mapboxToken;
var mapboxClient = mapboxSdk({ accessToken: mapboxgl.accessToken });
this.map = new mapboxgl.Map({
     container: 'map',
     style: 'mapbox://styles/mapbox/streets-v11',
     center: [0, 0],
     zoom: 10
});
mapboxClient.geocoding.forwardGeocode({
    query: 'Wellington, New Zealand',
    autocomplete: false,
    limit: 1
})
    .send()
    .then(function(response) {
        if (
            response &&
            response.body &&
            response.body.features &&
            response.body.features.length
        ) {
            var feature = response.body.features[0];
            new mapboxgl.Marker().setLngLat(feature.center).addTo(this.map);
          }
    });

这会产生mapboxClient.geocoding is undefined 错误。我正在以与教程相同的方式调用客户端。我哪里错了？

Answer 1

我认为您需要将 import 声明替换为：

import mapboxSdk from '@mapbox/mapbox-sdk/services/geocoding'

这是基于我对the documentation的阅读。

要创建服务客户端，请从“@mapbox/mapbox-sdk/services/{service}”导入服务的工厂函数，并提供您的访问令牌。

那么你可能也摆脱了.geocoding 部分。

大概他们是这样打包的，这样您就不必为您不使用的服务捆绑所有代码 - 而通过 unpkg 访问它，您可以获得一切。