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

Posted 2023-02-16

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

【英文标题】：How to close all popups programmatically in mapbox gl?

【发布时间】：2017-04-13 01:18:22

【问题描述】：

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

【问题讨论】：

与***.com/questions/40849927/… 相同，假设弹出窗口与一些标记相关联。我在地图上使用未附加到任何标记的弹出窗口（如示例mapbox.com/mapbox-gl-js/example/popup）。有没有办法从地图中获取所有打开的弹出窗口？

【参考方案1】：

这是一个例子：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);

正如您在Marker source 中看到的，togglePopup 在内部使用这两种方法：

togglePopup() 
    var popup = this._popup;

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

【讨论】：

这对于关闭特定的弹出窗口很有用，但不能解决地图上“所有弹出窗口”的问题，因为它假定您引用 popup 以便调用 @987654330 @。有没有办法处理地图上的所有弹出窗口？

@StephenLead 请参阅my answer 了解如何关闭所有弹出窗口，无论它们是如何创建的。

【参考方案2】：

接受的答案不适用于我的用例（我没有使用标记）。通过利用 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');

【讨论】：

您实际上是将弹出窗口存储在一个变量中并通过它访问它。希望有一种方法可以从地图本身访问它。喜欢，map.getMarker(id)

【参考方案3】：

Mapbox 自动使用 .mapboxgl-popup 类作为弹出窗口。您还可以使用options.className 添加其他类。

所以，如果你有 jQuery 可用，那就这样做吧：

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

或者纯javascript：

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

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

【讨论】：

假设只有一个弹出窗口是不安全的。您可以设置closeOnClick: false 并在屏幕上显示尽可能多的弹出窗口。

好的，很酷，很好，但基本前提应该仍然有效。上面的 jQuery 应该“正常工作”，而普通的 js 你必须遍历 popup 到 remove() 每个。

【参考方案4】：

我知道这是一个老问题，但我最近在 Mapbox 上工作。从 mapbox-gl v2.3 开始，mapboxgl.Popup 有一个 closeOnClick 属性，如果设置为 true，当您点击离开弹出窗口时，弹出窗口就会消失。

let popup = new mapboxgl.Popup(
  anchor: "top",
  closeOnClick: true,
);

map.on(
  "click",
  "location",
  (e) => 
    map.getCanvas().style.cursor = "pointer";

    let coordinates = e.features[0].geometry.coordinates.slice();

    popup
      .setLngLat(coordinates)
      .sethtml("what I want to display")
      .addTo(map);
  
);

或者，您可以在“mouseenter”而不是“click”上显示弹出窗口，并添加一个“mouseleave”事件来删除弹出窗口：

  map.on(
  "mouseleave",
  "location",
  () => 
    map.getCanvas().style.cursor = "";
     popup.remove();
  
);