1.打开信息窗体上个文章已有
(点击bbbb)
2.在项目中可能打开信息窗体里面可能还需一些功能,所以点击事件是必不可少的
3.利用事件委托 e.target判断是否是自己想要的点击的dom元素
或者用settimeout也行
4.如果点击其他地方出现报错 就在 destory生命周期里面把事件移除掉
我这里就直接上代码 了
<template>
<div class="content">
<div class="amap-wrapper">
<el-amap class="amap-box" :zoom="zoom" :center="center" :mapStyle="mapStyle">
<el-amap-marker
v-for="marker in markers"
:position="marker.position"
:key="marker.id"
:events="marker.events"
:icon="marker.icon"
></el-amap-marker>
<el-amap-info-window
v-if="window"
:position="window.position"
:visible="window.visible"
:content="window.content"
:offset="window.offset"
></el-amap-info-window>
</el-amap>
</div>
</div>
</template>
<script>
export default {
data() {
return {
center: [121.539693,31.126667],
zoom:16,
mapStyle: "amap://styles/8b6be8ec497009e17a708205348b899a", //设置地图样式
markers: [],
windows:[],
window:'',
}
},
methods:{
point(){
let markers = [];
let windows=[]
let that=this
let pointMarker=[
{
lng:121.536477,
lat:31.26924,
url:"../../assets/logo.png",
title:"this is title",
text: "aaaaa"
},{
lng:121.538097,
lat:31.126337 ,
url:"../../assets/logo.png",
title:"this is title",
text: "bbbbb"
}]
pointMarker.forEach((item,index)=>{
markers.push({
position: [item.lng,item.lat],
// icon:item.url, //不设置默认蓝色水滴
events: {
click() {
that.windows.forEach(window => {
window.visible = false; //关闭窗体
});
that.window = that.windows[index];
that.$nextTick(() => {
that.window.visible = true;//点击点坐标,出现信息窗体
});
}
}
})
windows.push({
position: [item.lng,item.lat],
content:"<div id='content'>"+item.text+"</div>",//内容
offset:[5,-15],//窗体偏移
visible: false//初始是否显示
})
})
// 加点
this.markers = markers;
//加弹窗
this.windows=windows
},
/**
* 通过事件委托给信息窗体里面的div添加点击事件
*/
init(){
document.getElementsByTagName("div")[0].addEventListener('click',function(e){
if(e.target==content){
console.log(77777)
}
})
}
},
mounted(){
this.point()
this.init()
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
.amap-wrapper {
width: 1440px;
height: 600px;
}
</style>