wordpress本地网站上传/网络推广员怎么做
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-markerv-for="marker in markers":position="marker.position":key="marker.id":events="marker.events":icon="marker.icon"></el-amap-marker><el-amap-info-windowv-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=thislet 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>