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 的阅读。

To create a service client, import the service's factory function from '@mapbox/mapbox-sdk/services/{service}' and provide it with your access token.

那么你可能也去掉了 .geocoding 部分。

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

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

Mapbox JS SDK geocoding client undefined

javascript

mapbox

vue.js

mapbox-gl-js