如何在mapbox gl中以编程方式关闭所有弹出窗口？

Question

所以,我知道我们Marker.togglePopup()在Mapbox GL Api中有.但是我们能以编程方式关闭所有弹出窗口吗？

Answer 1

接受的答案不适用于我的用例（我没有使用标记）。通过利用 mapbox 的内置事件工作流程，我能够提出不同的解决方案。希望这对其他人有帮助。

Mapbox 允许您收听地图上的事件（并手动触发它们）。文档没有提到它，但您可以使用自定义事件。

鉴于您有一个弹出窗口：

// Create popup and add it to the map
const popup = new mapboxgl.Popup({ offset: 37, anchor: 'bottom' }).setDOMContent('<h5>Hello</h5>').setLngLat(feature.geometry.coordinates).addTo(map);

// Add a custom event listener to the map
map.on('closeAllPopups', () => {
  popup.remove();
});

当你想关闭所有弹出窗口时，触发事件：

map.fire('closeAllPopups');

Answer 2

.mapboxgl-popupMapbox 自动使用弹出窗口的类。您还可以使用 来添加其他类options.className。

因此，如果您有可用的 jQuery，只需执行以下操作：

$('.mapboxgl-popup').remove();

或者简单的 JavaScript：

const popup = document.getElementsByClassName('mapboxgl-popup');
if ( popup.length ) {
    popup[0].remove();
}

我很确定您可以假设只有一个弹出窗口打开。默认行为似乎是，如果一个打开并单击第二个项目，则当第二个弹出窗口打开时，第一个弹出窗口将从 DOM 中完全删除。如果您的应用程序以某种方式允许多个打开的弹出窗口，您将需要使用纯 js 循环并删除每个弹出窗口，而不是仅使用第一个项目。

Answer 3

下面是一个示例:https://jsfiddle.net/kmandov/eozdazdr/
单击右上角的按钮可打开/关闭弹出窗口.

鉴于你有一个弹出窗口和一个标记:

var popup = new mapboxgl.Popup({offset:[0, -30]})
    .setText('Construction on the Washington Monument began in 1848.');

new mapboxgl.Marker(el, {offset:[-25, -25]})
    .setLngLat(monument)
    .setPopup(popup)
    .addTo(map);

您可以通过调用以下方法关闭弹出窗口:

popup.remove();

或者您可以通过致电打开它:

popup.addTo(map);

正如你可以在看到标记源,togglePopup在内部使用这两种方法:

togglePopup() {
    var popup = this._popup;

    if (!popup) return;
    else if (popup.isOpen()) popup.remove();
    else popup.addTo(this._map);
}