- 首页 > it技术 > >
【记录】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 给当前数据
*/
//弹窗模板
查看详情//查看详情
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);
};
});
}
推荐阅读
