如何关闭所有弹出窗口？

Question

我的地图上有多个（444）弹出窗口。

我尝试了以下方法：

$(".leaflet-popup-close-button").each(function (index) {
    $(".leaflet-popup-close-button")[index].click();
});

但是这种方式，并不是所有的都被关闭。只有其中一半被移除，确切地说是一半。所以第一次移除了222个，第二次移除了111个。

为什么会发生这种情况呢？

- Jo Smo

---

创建一个 fiddle 以重现问题。根据您提供的信息，很难给出答案。 - Adam Azad

$(this).click() - vp_arth

Answer 1

对于最近版本的Leaflet：

关闭弹出窗口的正确方法是使用内置的.closePopup()方法：

map.closePopup();

如果您有多个具有不同弹出窗口的图层（就像OP的情况一样），那么您可以遍历这些图层并关闭每个图层上的弹出窗口：

map.eachLayer(function (layer) {
  layer.closePopup();
});

- Josh Crozier

Answer 2

这是我解决问题的方法：

var firstLayer = true;

 map.eachLayer(function (layer) {
    // do something with the layer
    if (firstLayer) {
        firstLayer = false;
    } else {
        map.removeLayer(layer);
    }
    //console.log(layer);
});

我有3个图层，第一个是主要的，显示我的地图，所以它不能被删除。我删除了第二个和第三个图层，它们都有多个弹出框。

感谢@rafaelbiten指出正确的方向（图层）。

- Jo Smo

Answer 3

我知道你想做什么，但那似乎不是一个很好的主意。你实际上（通过编程）导致了444个并不存在的点击事件发生。如果有一天你决定跟踪用户对这些项目的点击，你会遇到问题。

如果你尝试向这444个leaflet-popup-close-button的共同父元素添加一个类，并通过CSS强制它们折叠/关闭，会怎样呢？

像这样的解决方案会更好地解决你所要做的事情。

顺便说一下，查看他们的文档，似乎这些弹出窗口都在一个新层上打开，所以你可能只需要删除该层，所有弹出窗口都将消失。

从他们的文档中可以看到：

使用Map#openPopup打开弹出窗口，确保一次只打开一个弹出窗口（建议用于可用性），或使用Map#addLayer打开任意数量的弹出窗口。

进一步检查后，你还有addLayer和removeLayer。无论你做什么，我建议你避免所有这些编程点击。

- rafaelbiten

---

隐藏父HTML元素是可行的，但是当我尝试添加新的弹出窗口时，它们不会显示出来，因为父HTML元素被隐藏了。我将尝试使用图层来解决这个问题。 - Jo Smo

是的，根据我在他们的文档中看到的，你可能已经在使用层。我不清楚你想要实现什么。当添加更多项目时，你可以尝试删除添加到父元素的类，但我认为他们的API允许你在不添加/删除类的情况下完成它，所以我建议你尝试使用API。 - rafaelbiten

它与 removeLayer 一起工作。我已经尝试过 removeLayer，但第一次使用时用错了。 :) - Jo Smo

太好了！我非常确定这是解决问题的正确方法，我们刚刚避免了成千上万次的点击！=) - rafaelbiten