Mapbox点击地图后无法通过element.click()触发自定义Marker点击事件

• 你自定义的CustomMarker没有给Marker DOM元素绑定原生点击事件，而是劫持了Mapbox地图实例的全局click事件委托来实现点击回调触发。你重写的_onMapClick方法只会处理Mapbox包装后、挂载了originalEvent属性的地图点击事件，不会响应直接调用element.click()触发的原生DOM点击事件。
• Mapbox自带交互状态管理机制，为了区分单击、拖拽、双击缩放等不同交互行为，当你首次单击地图空白区域后，Mapbox会进入单击交互的判定周期，临时拦截非地图交互触发的DOM事件冒泡，直接调用Marker元素的click方法产生的事件无法冒泡到地图的全局事件监听层，因此不会触发你定义的回调。
• 当你执行拖拽地图、双击缩放操作后，Mapbox会判定当前交互不是单击操作，结束单击判定周期并取消临时事件拦截，因此按钮触发的点击事件又可以正常冒泡到地图层，恢复回调触发。

• 方案1：直接给Marker DOM元素绑定原生click事件，完全不依赖地图的事件委托，从根源解决问题：

const el1 = document.createElement('div');
el1.id = "marker1";                                                
el1.style.marginTop = '-'+(36/2)+'px';
// 直接绑定原生点击事件
el1.addEventListener('click', () => {
  console.log(1+1);
})
// 正常初始化Marker即可，不需要再自定义CustomMarker类
new mapboxgl.Marker(el1).addTo(map);

• 方案2：如果需要保留CustomMarker的现有逻辑，修改按钮触发逻辑，不直接调用元素click，而是主动调用你挂载的_handleClick方法：

// 先获取对应的Marker实例（建议把所有自定义Marker存在一个数组里方便索引，不要从DOM反查）
const markers = [];
// 初始化的时候存进去
markers.push(new CustomMarker(el1).onClick(() => {console.log(1+1)}).addTo(map))

// 按钮点击的时候直接调用对应Marker的_handleClick
markers[0]._handleClick();

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