Leaflet.js：页面加载时打开所有弹出气泡

Question

我正在尝试从Leaflet.js文档中了解如何在页面显示时打开多个弹出窗口。例如，如果有三个标记（每个表示一个建筑物），则每个标记都会立即打开其弹出窗口。

http://leaflet.cloudmade.com/reference.html#popup

加密地说：

“使用Map#openPopup打开弹出窗口，同时确保一次只有一个弹出窗口处于打开状态（建议用于可用性），或者使用Map#addLayer打开任意数量的弹出窗口。”

但是

http://leaflet.cloudmade.com/reference.html#map-addlayer

没有任何提示说明如何实现这一点。

有人能否澄清这是否可能，并给出任何关于如何做到这一点的提示？

- fooquency

Answer 1

你必须将弹出框添加为图层。

尝试使用以下示例代码：

var popupLocation1 = new L.LatLng(51.5, -0.09);
var popupLocation2 = new L.LatLng(51.51, -0.08);

var popupContent1 = '<p>Hello world!<br />This is a nice popup.</p>',
popup1 = new L.Popup();

popup1.setLatLng(popupLocation1);
popup1.setContent(popupContent1);

var popupContent2 = '<p>Hello world!<br />This is a nice popup.</p>',
popup2 = new L.Popup();

popup2.setLatLng(popupLocation2);
popup2.setContent(popupContent2);

map.addLayer(popup1).addLayer(popup2);

- aborruso

---

太好了 - 我真的很感激这个例子。我想，没有办法同时拥有图标和弹出窗口，对吗？ - fooquency

嗨，fooquency，我不知道。尝试在新的官方leaflet群组中发布：https://groups.google.com/forum/#!forum/leaflet-js - aborruso

下面使用类扩展的答案是更好的方法，应该被接受的答案。 - masterchief

@masterchief 我不同意，因为现在以下扩展程序由于openPopup实现的更改而破坏了togglePopup方法。 - Ethereal

运行得很好，但是我不得不将L.Popup更改为L.popup。 - raratiru

Answer 2

marker.addTo(myMap).bindPopup('Hello popup', {autoClose:false}).openPopup();

使用autoClose选项

- thinhnk

Answer 3

L.Map = L.Map.extend({
    openPopup: function(popup) {
        // this.closePopup(); 
        this._popup = popup;
        return this.addLayer(popup).fire('popupopen', {
            popup: this._popup
        });
    }
});

示例：http://jsfiddle.net/paulovieira/yVLJf/

在这里找到：https://groups.google.com/forum/#!msg/leaflet-js/qXVBcD3juL4/4pZXHTv1baIJ

- gies0r

---

你能解释一下这段代码会实现什么功能吗？如果你能解释一下就太感谢了。 - Ahmad Alfy

我编辑了我的回答。从创建者的角度来看：“您可以“L.Class.Extend”默认的L.Map类，定义一个新的openPopup方法。这个新方法将是默认方法的简单复制粘贴，除了当前弹出窗口被关闭的部分（只需注释掉该行）。 - gies0r

再次感谢，我是Javascript的新手，这为我打开了一个新的探索/学习途径。 - Caribou

Answer 4

这个解决方案对我有用：

L.marker([30.4160534, -87.2226216], {icon: icon_url}).bindPopup('Hello World',{autoClose:false}).addTo(map).openPopup();

这是预览图像：https://prnt.sc/NuX9Qs291IQq

- Ibrahim

Answer 5

在最新版本中，有一个autoClose选项。

要同时打开标记和弹出窗口，而不需要显式添加图层：

var popup1 = new L.Popup({'autoClose':false});
popup1.setLatLng([53.55375, 9.96871]);
popup1.setContent('First popup');

var popup2 = new L.Popup({'autoClose':false});
popup2.setLatLng([53.552046, 9.9132]);
popup2.setContent('Second popup');

L.marker([53.55375, 9.96871]).addTo(myMap)
    .bindPopup(popup1).openPopup();

L.marker([53.552046, 9.9132]).addTo(myMap)
    .bindPopup(popup2).openPopup();

- Nice Books

Answer 6

棘手的解决方案是在打开地图对象时移除弹出链接：

map.on('popupopen', function (e) {
    delete map._popup;
});

- IvanM

---

这会对将来切换/关闭弹出窗口有什么影响？ - Ethereal