js高德地图InfoWindow的一个异步操作问题

Question

在vue中引用了高德地图，用markerList渲染数据点，在getInfoWindow的时候怎么插入一个异步操作？
普通的话是这样出个弹窗：

    initMarkerList() {
      let _this = this;
      map.clearMap();
      AMapUI.loadUI(["misc/MarkerList", "overlay/SimpleInfoWindow"], function(
        MarkerList,
        SimpleInfoWindow
      ) {
        var markerList = new MarkerList({
            //其他代码已省略
          getInfoWindow: function(data, context, recycledInfoWindow) {
            let $data = data.extData;
            let str = ``;
            if (recycledInfoWindow) {
              recycledInfoWindow.setInfoTitle($data["Name"]);
              recycledInfoWindow.setInfoBody(str);

              return recycledInfoWindow;
            }
            return new SimpleInfoWindow({
              infoTitle: $data["Name"],
              infoBody: str,
              offset: new AMap.Pixel(0, -20)
            });
          }
        });
        markerList.render(_this.markers);
      });
    },

现在需要异步获取些数据，请问该如何处理？

    initMarkerList() {
      let _this = this;
      map.clearMap();
      AMapUI.loadUI(["misc/MarkerList", "overlay/SimpleInfoWindow"], function(
        MarkerList,
        SimpleInfoWindow
      ) {
        var markerList = new MarkerList({
            //其他代码已省略
          getInfoWindow: function(data, context, recycledInfoWindow) {
            let $data = data.extData;
            let str = ``;
            _this.$http
              .post(_this.page.root + "Cleandot/QueryCleandotModel", {
                ID: $data["ID"]
              })
              .then(data => {
                str = `test`;
              })
              .then(() => {
              //请问这里该如何返回？
                if (recycledInfoWindow) {
                  recycledInfoWindow.setInfoTitle($data["Name"]);
                  recycledInfoWindow.setInfoBody(str);

                  return recycledInfoWindow;
                }
                return new SimpleInfoWindow({
                  infoTitle: $data["Name"],
                  infoBody: str,
                  offset: new AMap.Pixel(0, -20)
                });
              });
          }
        });

        markerList.render(_this.markers);
      });
    },

自己异步很生疏，麻烦各位大佬指点一下

Answer 1

换了种做法，反正需求做出来就完事了

initMarkerList(arr, Flag = false) {
    //flag表示是否初次调用
      let _this = this;

      if (Flag) {
        window.marker = new AMap.Marker({
          map: map,
          icon: "http://webapi.amap.com/theme/v1.3/markers/n/mark_b.png",
          position: _this.c_center,
          extData: { ID: 0 },
          // offset: new AMap.Pixel(-48, -19),
          clickable: true,
          animation: "AMAP_ANIMATION_DROP"
        });
        window.infoWindow = new AMap.InfoWindow({
          offset: new AMap.Pixel(0, -30)
        });
        AMapUI.loadUI(["misc/MarkerList", "overlay/SimpleInfoWindow"], function(
          MarkerList
          // SimpleInfoWindow
        ) {
          window.markerList = new MarkerList({
            //关联的map对象
            map: map,
            getDataId: function(dataItem, index) {
              //返回数据项的Id
              return dataItem.ID;
            },
            getPosition: function(dataItem) {
              return dataItem.position;
            },
            getMarker: function(dataItem, context, recycledMarker) {
              // if (recycledMarker) {
              //   return recycledMarker;
              // }
              //返回一个新的Marker
              return new AMap.Marker(dataItem);
            },
            getInfoWindow: function() {
              return false;
            }
          });

          markerList.on("markerClick", function(event, record) {
            let $data = record.data.extData;
            let lnglat1 = new AMap.LngLat(..._this.c_center);
            let lnglat2 = new AMap.LngLat($data["Long"], $data["Lat"]);
            let str = `获取中`;
            window.infoWindow.setContent(str);
            _this.$http
              .post(_this.page.root + "App/QueryCleandotModel", {
                ID: $data["ID"]
              })
              .then(data => {
                let $model = data.data.Model;
                let zStr = "";

                let xStr = "";

                if ($model["ZModel"]) {
                  zStr = $model["ZModel"]["Name"];
                } else {
                  zStr = "无";
                }
                if ($model["XModel"]) {
                  xStr = $model["XModel"]["Name"];
                } else {
                  xStr = "无";
                }
                str = `
               <div>
                  <div  class="c_i_title">
                  ${$model["PName"]}
                  </div>
                  <div class='c_i_content'>
                      <div class="c_i_c1 clearfix">
                        <p> ${$model["PLocation"]} <span class="fr">相距约${(
                  Math.round(lnglat1.distance(lnglat2)) / 1000
                ).toFixed(2)}公里</span></p>
                      </div>   
                       <div class="c_i_c2">
                        <p>保洁队长：  <span class="fr">${zStr}</span></p>
                        <p>巡查员：  <span class="fr">${xStr}</span></p>
                      </div>              
                    </div>
                     <div class="c_i_link"  ontouchstart ="goDetail(${
                       $model["ID"]
                     },'${zStr}',${$model["ZID"]},${
                  $model["CID"]
                })">查看河道区域详情> </div>
                </div>
              `;
              })
              .then(() => {
                window.infoWindow.setContent(str);
                window.infoWindow.open(map, record.position);
              });
          });

          markerList.render(arr);
        });
      } else {
        markerList.render(arr);
      }
    },

Answer 2

请问这个问题解决了吗?求方法