Vue3 Leaflet <l-map>组件@click事件重复触发及控件点击误触发问题

问题场景 #

给<l-map>组件绑定@click事件回调addMarker，期望点击地图有效区域时执行添加标记逻辑，初始实现代码如下：

<template>
  <l-map 
  style="height: 550px" 
  :zoom="zoom" 
  :center="center"
  @click="addMarker"
  >
    <l-control-layers position="topleft" :collapsed="false"></l-control-layers>
    <l-tile-layer
        v-for="tileProvider in tileProviders"
        :key="tileProvider.name"
        :name="tileProvider.name"
        :visible="tileProvider.visible"
        :url="tileProvider.url"
        :attribution="tileProvider.attribution"        
        layer-type="base"/>     
    <l-control position="topright" >
      <button @click="getUserLocation">
        Find my location
      </button>
    </l-control>
  </l-map>
</template>

<script>
export default {
  data() {
    return { 
      // 其他地图配置项：zoom、center、tileProviders等
    }
  },
  // 注意：原代码写法有误，methods不能放在data的return内部，需要和data平级
  methods: {
    addMarker(event) {       
      console.log(event.latlng)
    },
    getUserLocation() {
      // 获取定位逻辑
    }
  }
}
</script>

运行后出现两个异常：

• 点击地图区域时，addMarker函数会连续调用两次，控制台重复打印latlng信息：
  
• 点击<l-control-layers>、<l-control>等地图内部控件时，也会触发绑定在<l-map>上的click事件，不符合交互预期。

原因说明 #

1. 事件重复触发：直接写@click会同时绑定Vue组件自定义事件和Leaflet地图实例的原生DOM事件，两个事件序列都会触发回调，因此执行两次。
2. 控件点击冒泡：地图控件属于地图容器的子DOM元素，点击事件会沿DOM树冒泡到地图容器，进而触发地图点击回调。

修复方案 #

1. 替换事件绑定，解决重复触发 #

将<l-map>上的@click="addMarker"替换为Vue2Leaflet官方提供的地图原生事件绑定@l-click="addMarker"，该事件只会在Leaflet地图本身触发点击时执行一次回调，不会重复触发。

2. 增加事件源判断，拦截控件点击 #

在addMarker回调中判断触发事件的DOM源，如果点击的是地图控件类元素，直接终止逻辑执行即可：

methods: {
  addMarker(event) {
    // 拦截控件区域的点击冒泡
    if (event.originalEvent.target.closest('.leaflet-control')) {
      return
    }
    // 原有业务逻辑
    console.log(event.latlng)
    // 此处写添加标记的逻辑即可
  }
}

额外注意 #

原示例代码存在语法错误：methods不能写在data()的返回值内部，需要和data、组件生命周期钩子等配置项平级，否则方法不会被Vue正确挂载，会出现方法找不到的报错。

内容的提问来源于stack exchange，提问作者JohnGIS