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

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

根据此处的文档，该标记为HTML+CSS，并附有一个pop：

这一切都很好，直到一个标记位于另一层的顶部。单击标记时，将显示标记弹出窗口和图层/多边形弹出窗口

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

---

在（'click'）上没有标记的

 如果每次单击地图时都使用
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);
});

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

使用自定义HTML创建标记，并给它一个类

现在，在收听区域弹出窗口的单击事件时，检查目标类列表是否包含返回的标记类，并让mapbox在内部处理标记弹出窗口

map.on（'click'，'states layer'，函数（e）{
if（event.originalEvent.target.classList.contains（MARKER_CLASS））返回；
}

如果有人遇到同样的问题，希望这能有所帮助。
好吧，通过使用
setPopup
标记的弹出窗口是由bij mapbox内部处理的。标记没有单击事件可供侦听和处理，就像您上面提到的那样。
 map.on('click', 'states-layer', function (e) {
    new mapboxgl.Popup()
        .setLngLat(e.lngLat)
        .setHTML(e.features[0].properties.name)
        .addTo(map);
});

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