Mapbox—geocoder搜索地点error eaching the server

——There was an errorr eaching the server

环境说明：

vue3.3.4

mapbox-gl: 2.13.0

@mapbox/mapbox-gl-geocoder: 4.7.4

一、错误呈现

​ 当地图初始化成功后，添加mapbox geocoder的控件，本地开发环境测试没有问题，vue3环境使用vite打包后，检索地点（北京）出现There was an errorr eaching the server的错误提示。

​ 此时的网络请求如下：

二、解决办法

经过对比本地开发测试的成功案例，和打包后的错误请求，再加上mapbox/mapbox-gl-geocoder源码（https://github.com/mapbox/mapbox-gl-geocoder）学习，解决办法如下：

  • 错误原因：根据输入地点检索符合城市信息的网络请求缺少 access_token，并且错误的网络请求前面的地址是本地的IP，正确的应该为https://api.mapbox.com

图：正确的网络请求

图：错误的网络请求

  • 解决思路：更改源码

    原理：在网络请求前添加access_token请求参数，并且更改请求地址

  1. 传入前端传递的access_token
// *\node_modules\@mapbox\mapbox-gl-geocoder\lib\index.js// _geocode函数内部const config = this._setupConfig(requestType, searchInput);// 此处添加config.access_token = this.options.accessToken; // 添加的tokenvar request;switch (requestType) {  case GEOCODE_REQUEST_TYPE.LOCAL:    request = Promise.resolve();    break;  case GEOCODE_REQUEST_TYPE.FORWARD:    request = this.geocoderService.forwardGeocode(config).send();    break;  case GEOCODE_REQUEST_TYPE.REVERSE:    request = this.geocoderService.reverseGeocode(config).send();    break;}
  1. 添加传入数据的验证信息
// node_modules\@mapbox\mapbox-sdk\services\geocoding.js// Geocoding.forwardGeocode函数v.assertShape({  query: v.required(v.string),  mode: v.oneOf('mapbox.places', 'mapbox.places-permanent'),  countries: v.arrayOf(v.string),  proximity: v.oneOf(v.coordinates, 'ip'),  types: v.arrayOf(v.oneOf(featureTypes)),  autocomplete: v.boolean,  bbox: v.arrayOf(v.number),  limit: v.number,  language: v.arrayOf(v.string),  routing: v.boolean,  fuzzyMatch: v.boolean,  worldview: v.string,  // 此处添加  access_token: v.string, // 添加access_token验证，如果不添加则传入参数会报错：验证失败})(config);

3. 修改请求参数

备注：可以把config.access_token固定，换成自己的mapbox token，这样步骤1和2就不需要更改（下文是根据前端传入的token动态进行变更）

// node_modules\@mapbox\mapbox-sdk\services\geocoding.js// Geocoding.forwardGeocode函数return this.client.createRequest({    method: 'GET',    // 此处修改，添加https://api.mapbox.com前缀 和 "?access_token=" + config.access_token后缀    path: 'https://api.mapbox.com/geocoding/v5/:mode/:query.json' + "?access_token=" + config.access_token,    params: pick(config, ['mode', 'query']),    query: query  });