使用 Leaflet.js 关闭所有弹出窗口答案

【问题标题】：Close All Popups with Leaflet.js使用 Leaflet.js 关闭所有弹出窗口
【发布时间】：2014-01-15 23:01:30
【问题描述】：

我正在使用 Leaflet.js 制作一张地图，该地图使用了许多标记（最终会有大约 40 个标记）。每个标记都有一个包含详细信息的相关弹出窗口。 Leaflet.js 的默认行为似乎是自动打开至少一个标记的弹出窗口（我相信最后列出的标记）。

我希望所有在地图页面初始加载时关闭弹出窗口，因此用户必须单击标记才能打开弹出窗口。有谁知道如何做到这一点？我这里有一个原型：

http://dev.monographic.org/maps/prototype-10.html

谢谢。

【问题讨论】：

这可能会有所帮助：stackoverflow.com/questions/39186001/how-to-close-all-popups

标签： javascript map popup

【解决方案1】：

map 对象中有一个干净的方法可以关闭所有打开的弹出窗口

map.closePopup();

【讨论】：

这会为您关闭所有弹出窗口还是只关闭一个？
感谢 Florian Boudot
@JoSmo 就我而言只有一个。
我想关闭所有弹出窗口。 map.closePopup(); 只关闭最后一个。见：observablehq.com/d/6ce88f5b8e361005

【解决方案2】：

我设法通过这段代码解决了我的问题：

$(".leaflet-popup-close-button")[0].click();

希望它对将来的人有所帮助。

【讨论】：

我觉得在执行click()之前最好先检查一下dom对象是否存在；以防执行时没有弹窗。
这真的很有用——我的地图设置为允许打开多个弹出窗口。当打开的数量大于 3 时，我可以使用它来关闭最旧的打开弹出窗口。

【解决方案3】：

只需删除您对 .openPopup() 的呼叫即可。

代替

L.marker([57.70887, 11.97456]).addTo(map).bindPopup("<b>Ideal Festival</b><br />2004").openPopup();

使用

L.marker([57.70887, 11.97456]).addTo(map).bindPopup("<b>Ideal Festival</b><br />2004");

点击行为仍然存在（当用户点击这些标记时，弹出窗口仍然会出现），但在页面加载时弹出窗口将不可见。

【讨论】：

【解决方案4】：

$(".leaflet-popup-close-button").click()

地图加载完成后试试这个。

【讨论】：

【解决方案5】：

  map.closePopup();

对我不起作用，并关闭了最近的弹出窗口。

user2304819 建议的概括：

  var ButtonremoveNotidfications = L.easyButton({
                id: 'ButtonremoveNotidfications',
                states: [{
                    stateName: 'Show',
                    icon: '<strong>Clear notifications</strong>',
                    title: 'Show',
                    onClick: function (btn) { //Below is the closing module
                        var aa = $(".leaflet-popup-close-button").length
                        if (aa > 0) {
                            for (var i = 0; i < aa; i++) {
                                $(".leaflet-popup-close-button")[i].click();
                            }
                        }
                    }
                }]
            });
            ButtonremoveNotidfications.button.style.width = widthbuttonstyle;
            ButtonremoveNotidfications.button.style.height = heightbuttonstyle;
            ButtonremoveNotidfications.button.style.color = 'blue';
            ButtonremoveNotidfications.addTo(map);

【讨论】：

【解决方案6】：

popup.removeFrom(map)

对我有用。

【讨论】：

这不会关闭它。它将完全删除它，使其无法再次打开。这可能是我们想要的，但可能不是