【记录】Vue3高德地图自定义弹窗中的事件

·
/*
 1.弹窗，不要在 content 里定义 html 内容不然所有内容的数据都会是循环的最后一个
 2.使用 infowindow.setContent(windowPopup); 设置弹窗的模板
*/
infowindow = new AMap.InfoWindow({
    isCustom: true,//开启自定义弹窗
    //content: contents,
    anchor: "bottom-center",
    offset: new AMap.Pixel(10, -10),
});

/* 
 1.把内部方法赋值给 window
 2.把数据的 key 赋值给自定义属性，点击事件时候获取自定义属性的 key 给当前数据
*/
//弹窗模板
<div class="link_btn"  data-num=${i} onclick="$detailsAction()">查看详情</div>

//查看详情
window.$detailsAction = function detailsAction() {
    const num = document.querySelector('.link_btn').getAttribute('data-num')
    const datas = state.pointList[+num]
    getData(datas);
    getVideoCode();
    getEchartsAction();
    state.infowindow.close();
    state.realtime.maxDerail = true;
    state.realtime.minDerail = 1;
}
·

/* 异步加载地图插件 / 地区查询 --  点位聚合 */
AMap.plugin(["AMap.DistrictLayer", "AMap.MarkerClusterer"],()=>{
  let disProvince = new AMap.DistrictLayer.Province({
  zIndex: 12,
  adcode: ["130000"],
  depth: 2,
  styles: {
   fill: function (properties) {
     let adcode = properties.adcode;
     return getColorByAdcode(adcode);
   },
   "province-stroke": "#09b8bf",
   "city-stroke": "#09b8bf",
   "county-stroke": "#09b8bf", //线条颜色
   },
 });
  disProvince.setMap(map);      
})

/* 高德地图异步加载 */
export default function MapLoader() {
   return new Promise((resolve, reject) => {
     if (window.AMap) {
       resolve(window.AMap);
     } else {
       var script = document.createElement("script");
       script.type = "text/javascript";
       script.async = true;
       script.src =
         "http://webapi.amap.com/maps?v=1.4.15&callback=initAMap&key=5df63594d41cda1654066cca8fd5836b&plugin=AMap.Object3DLayer,AMap.DistrictSearch,AMap.Geocoder";
       script.onerror = reject;
       document.head.appendChild(script);
     }
     window.initAMap = () => {
       resolve(window.AMap);
     };
   });
 }