如何解决Mapbox GL JS中地图点击事件与点击标记显示弹出窗口之间的冲突

Question

我使用下面的代码在地图上创建了一个点击事件。

mymap.on('click', onMapClick);

还有一个带有弹出窗口的标记

var marker = new mapboxgl.Marker().setLngLat([loc.lon,loc.lat]);
marker.setPopup(new mapboxgl.Popup({closeOnMove:true}).setText(`Hello`));
marker.addTo(mymap);

当我单击标记时，两个事件都被触发。

我所期望发生的只是事件的标记(显示弹出)被触发。但是函数onMapClick也被触发。

Answer 1

在我的例子中，我将事件绑定到我的图层，但它应该是相同的。下面是我所做的，以防止地图点击和标记点击之间的冲突，以便正确显示弹出。

map.on('click', 'myLayerId', (e) => {
if (e.originalEvent.target.classList.contains('mapboxgl-marker')) return;
doSomething...
}

希望有帮助

Answer 2

当一个地图'click'事件被触发时，您可以检查被单击的原始元素是否是一个标记，如果是，则提前返回该函数—从而不执行地图单击操作。

map.on('click', (e) => {
if (e.originalEvent.target.closest('.mapboxgl-marker')) {
return // Click target was a marker so do nothing…
}
// Do something...
}

mokokom的解决方案几乎就在那里，但由于标记是内联svg，被点击的元素往往是内部svg元素，如<path>或<circle>。这些元素没有.mapboxgl-marker类，所以您需要通过.closest

查找树来找到它。