Leaflet JS：实现点击地图及Marker均可绘制圆形的监听需求

问题根源 #

Leaflet的Marker默认会阻止点击事件冒泡到地图容器，所以你绑定在map上的click监听器只会响应地图图层的点击，点击Marker时事件传不到地图层面。

方案1：给Marker单独绑定点击事件 #

把绘制圆形的逻辑抽成复用函数，同时给地图和Marker绑定点击事件，这样两者点击都会触发绘制：

// 全局变量存储圆形图层
var clickCircle;

// 禁用双击缩放
map.doubleClickZoom.disable();

// 抽离绘制圆形的复用函数
function drawCircleAtLatLng(latlng) {
  if (clickCircle) {
    map.removeLayer(clickCircle);
  }
  clickCircle = L.circle(latlng, {
    color: 'steelblue',
    fillColor: 'steelblue',
    fillOpacity: 0.5,
    radius: 4023
  }).addTo(map);
}

// 地图点击触发绘制
map.on('click', function(e) {
  drawCircleAtLatLng(e.latlng);
});

// 单个Marker点击触发绘制（如果是批量Marker，创建时统一绑定即可）
var marker = L.marker([你的纬度, 你的经度]).addTo(map);
marker.on('click', function(e) {
  drawCircleAtLatLng(e.target.getLatLng());
});

方案2：允许Marker的事件冒泡到地图 #

修改Marker的bubblingMouseEvents属性为true，这样点击Marker时事件会自动冒泡到地图，不用额外绑定Marker的事件：

// 全局变量存储圆形图层
var clickCircle;

// 禁用双击缩放
map.doubleClickZoom.disable();

// 地图点击触发绘制（原代码不变）
map.on('click', function(e) {
  if (clickCircle) {
    map.removeLayer(clickCircle);
  }
  clickCircle = L.circle(e.latlng, {
    color: 'steelblue',
    fillColor: 'steelblue',
    fillOpacity: 0.5,
    radius: 4023
  }).addTo(map);
});

// 创建Marker时开启事件冒泡
var marker = L.marker([你的纬度, 你的经度], {
  bubblingMouseEvents: true
}).addTo(map);

// 如果是已创建的Marker，直接修改属性：
// marker.setBubblingMouseEvents(true);

两种方案对比：

• 方案1更灵活，能单独给Marker设置不同的绘制逻辑；
• 方案2更简洁，适合不需要区分地图和Marker点击逻辑的场景。

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