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

Question

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

根据此处的文档，该标记是HTML + CSS，并带有弹出框： 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);
});

一切正常，直到标记位于另一层的顶部。 单击标记时，会同时显示标记的弹出窗口和图层/多边形的弹出窗口。

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

标记没有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创建标记，并为其提供一个类。

现在，当侦听区域弹出窗口的click事件时，请检查目标classList是否包含返回的标记类，并让mapbox在内部处理标记弹出窗口。

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

如果有人遇到相同的问题，希望对您有所帮助。