Mapbox—geocoder搜索地点error eaching the server

新城家电

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请求参数，并且更改请求地址
  

• 传入前端传递的access_token
  

1. // *\node_modules\@mapbox\mapbox-gl-geocoder\lib\index.js
2. // _geocode函数内部
3. const config = this._setupConfig(requestType, searchInput);
4. // 此处添加
5. config.access_token = this.options.accessToken; // 添加的token
7. var request;
8. switch (requestType) {
9.   case GEOCODE_REQUEST_TYPE.LOCAL:
10.     request = Promise.resolve();
11.     break;
12.   case GEOCODE_REQUEST_TYPE.FORWARD:
13.     request = this.geocoderService.forwardGeocode(config).send();
14.     break;
15.   case GEOCODE_REQUEST_TYPE.REVERSE:
16.     request = this.geocoderService.reverseGeocode(config).send();
17.     break;
18. }

复制代码

• 添加传入数据的验证信息
  

1. // node_modules\@mapbox\mapbox-sdk\services\geocoding.js
2. // Geocoding.forwardGeocode函数
3. v.assertShape({
4.   query: v.required(v.string),
5.   mode: v.oneOf('mapbox.places', 'mapbox.places-permanent'),
6.   countries: v.arrayOf(v.string),
7.   proximity: v.oneOf(v.coordinates, 'ip'),
8.   types: v.arrayOf(v.oneOf(featureTypes)),
9.   autocomplete: v.boolean,
10.   bbox: v.arrayOf(v.number),
11.   limit: v.number,
12.   language: v.arrayOf(v.string),
13.   routing: v.boolean,
14.   fuzzyMatch: v.boolean,
15.   worldview: v.string,
16.   // 此处添加
17.   access_token: v.string, // 添加access_token验证，如果不添加则传入参数会报错：验证失败
18. })(config);

复制代码

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

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

复制代码

来源:https://www.cnblogs.com/gby-web/p/17588435.html
免责声明：由于采集信息均来自互联网，如果侵犯了您的权益，请联系我们【E-Mail:cb@itdo.tech】 我们会及时删除侵权内容，谢谢合作！