带有弹出窗口的（多边形）图层顶部带有弹出窗口的 Mapbox 标记显示 2 个弹出窗口

Question

对于当前的项目，我正在使用 mapbox 来显示区域并在这些区域的顶部显示标记。两者都应该有一个带有简短描述的弹出窗口。

根据此处的文档，标记是 HTML + CSS 并且附有一个 pop：https://www.mapbox.com/help/custom-markers-gl-js/

new mapboxgl.Marker(el)
   .setLngLat(marker.geometry.coordinates)
   .setPopup(new mapboxgl.Popup({ offset: 25 }) // add popups
   .setHTML('<h3>' + marker.properties.title + '</h3><p>' + 
      marker.properties.description + '</p>'))
   .addTo(map);

区域是通过添加一个带有 geojson 对象的图层来绘制的，如本示例所述：https://122e4e-mapbox.global.ssl.fastly.net/mapbox-gl-js/example/polygon-popup-on-click/。监听这样的点击事件：

 map.on('click', 'states-layer', function (e) {
    new mapboxgl.Popup()
        .setLngLat(e.lngLat)
        .setHTML(e.features[0].properties.name)
        .addTo(map);
});

一切正常，直到标记位于另一层之上。单击标记时，标记的弹出窗口和 layer/polygon 的弹出窗口都会显示。

预期结果：仅显示标记的弹出窗口，因为这是点击的顶部元素。

没有on('click')标记。

Answer 1

如果您每次点击地图时都使用 new mapboxgl.Popup()，那么是的，您会得到 "new MapboxGL popup" :)

您需要重用现有的弹出窗口，如下所示：

var popup = new mapboxgl.Popup();
map.on('click', 'states-layer', function (e) {
    popup.setLngLat(e.lngLat)
        .setHTML(e.features[0].properties.name)
        .addTo(map);
});

Answer 2

最后我使用了以下解决方法：

使用自定义 HTML 创建标记并给它一个 class。

现在当侦听区域弹出的点击事件时，检查目标 classList 是否包含标记 class en return 并让 mapbox 在内部处理标记弹出。

map.on('click', 'states-layer', function (e) { if (event.originalEvent.target.classList.contains(MARKER_CLASS)) return; }

希望这对遇到同样问题的人有所帮助。

带有弹出窗口的（多边形）图层顶部带有弹出窗口的 Mapbox 标记显示 2 个弹出窗口

Mapbox marker with popup on top of (polygon shape) layer with popup shows 2 popups

javascript

mapbox

mapbox-gl-js