前端解决百度地图地址逆解析（BMap.Geocoder()）异步问题

前端解决百度地图地址逆解析（BMap.Geocoder()）异步问题

需求：将接口返回的坐标数据转换成详细的地址并渲染在页面上

问题：页面先渲染，地址后解析，导致渲染时没有数据显示

解决方法：new Promise()

// 处理导出轨迹明细地址解析异步操作
    getPosition(data) {
    
    
      return new Promise((resolve, reject) => {
    
    
        const temp = {
    
    };
        let point = new BMap.Point(data.longitude, data.latitude);
        let geoc = new BMap.Geocoder();
        geoc.getLocation(point, (result) => {
    
    
          let addr = result.addressComponents;
          var full_address =
            addr.city + addr.district + addr.street + addr.streetNumber;
          temp.position = full_address;
          return resolve(temp);
        });
      });
    }

在想要获取转换后的地址数据的地方调用

exportFu() {
    
    
      var params = {
    
    
        imei: this.imei,
        start_time: start,
        end_time: end,
      };

      this.$where.track.history(params).then(async (data) => {
    
    
        if (data.length == 0) {
    
    }
        for (let i = 0; i < data.length; i++) {
    
    
          const temp = await this.getPosition(data[i]);
          this.exportData.push({
    
    
            address: temp.position,
          });
        }
      });
    }