Question

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

根据此处的文档，标记为HTML + CSS，并带有弹出标记：domainurl.com/XXXinputtextXXX

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://www.mapbox.com/help/custom-markers-gl-js/。监听这样的点击事件：

 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()，则可以，您会得到一个“新MapboxGL弹出窗口”：）

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

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; }

希望这对任何遇到相同问题的人都有帮助。

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

2 个答案: