vue使用高德地图(v-amap)信息窗体里面的给点击事件

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>

最后

以上就是时尚凉面为你收集整理的vue使用高德地图(v-amap)信息窗体里面的给点击事件的全部内容，希望文章能够帮你解决vue使用高德地图(v-amap)信息窗体里面的给点击事件所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。