使用高德地图,经纬度转换为具体位置信息。解决遍历时多次调用异步方法,无法得到数组信息的问题。

在遍历时多次调用异步方法,遇到的坑。

通过接口拿到的数组中,每一个对象里只有经纬度,并没有页面中需要展示的具体地理信息。
前端处理,将具体的地理信息渲染到页面。

利用PositionConversion 函数将经纬度转换成具体地理位置信息。
使用高德地图,经纬度转换为具体位置信息。解决遍历时多次调用异步方法,无法得到数组信息的问题。

下图为控制台打印的结果。

使用高德地图,经纬度转换为具体位置信息。解决遍历时多次调用异步方法,无法得到数组信息的问题。

可以在控制台打印出转换为具体信息的数组,但是无法通过 length,索引 等方式拿到数组中的值。

经过痛苦的折磨后,才发现 PositionConversion() 方法使用回调函数来处理地理编码操作的结果,这是因为地理编码操作是异步的,可能需要一些时间才能完成。

下方代码成功解决了这个问题。通过 async await 结合 promise.all

async updatedList() {
  const positionArr = this.showDialogList.map((item) => {
    return this.PositionConversion(item.lon, item.lat);
  });
  const myArr = await Promise.all(positionArr);
  this.toileInfo = this.showDialogList;
  // 把myArr中的每一项,按顺序 放到 toileInfo 里
  this.toileInfo.forEach((item, index) => {
    item.position = myArr[index];
  });
},
// 将经纬度转换成具体位置信息
PositionConversion(lng, lat) {
  let position = [lng, lat]; //位置的经纬度
  return new Promise((resolve, reject) => {
    new AMap.plugin("AMap.Geocoder", () => {
      const geocoder = new AMap.Geocoder({
        city: "028",
      });

      geocoder.getAddress(position, (status, result) => {
        if (status === "complete" && result.info === "OK") {
          // result为对应的地理位置详细信息
          this.place = result.regeocode.formattedAddress;
          resolve(result.regeocode.formattedAddress);
        }
      });
    });
  });
},

我个人简单的理解,经纬度转换为具体位置信息是一个异步的过程。
我使用map方法,多次调用 PositionConversion 方法。所以需要promise.all来得到遍历后的总结果。
结合 async await 拿到promise.all的返回值,后续再进行其他处理。

原文链接:https://juejin.cn/post/7225139862222946362 作者:划水鸢

(1)
上一篇 2023年4月24日 上午10:10
下一篇 2023年4月24日 上午10:20

相关推荐

发表回复

登录后才能评论