带有弹出窗口的Mapbox标记在(多边形形状)层顶部显示了2个弹出窗口。
对于当前的项目，我使用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);
});这一切都很好，直到一个标记被定位在另一个层的顶部。单击标记时，标记的弹出和图层/多边形的弹出都会显示。
预期结果：只显示标记的弹出，因为这是单击的顶部元素。
标记没有on('click')。
回答 2
Stack Overflow用户
发布于 2018-07-18 09:47:48
最后，我使用了以下解决方法：
创建带有自定义HTML的标记，并给它一个类。
现在，当侦听区域弹出窗口的单击事件时，请检查目标classList是否包含标记类en返回，并让mapbox内部处理标记弹出。
map.on('click', 'states-layer', function (e) { if (event.originalEvent.target.classList.contains(MARKER_CLASS)) return; }
如果有人遇到同样的问题，希望这会有所帮助。
Stack Overflow用户
发布于 2018-07-12 06:12:54
如果您每次点击地图时都使用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);
});https://stackoverflow.com/questions/51285030
复制相似问题
腾讯云开发者
