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

Question

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

http://leafletjs.com/reference.html#popup

神秘地说：

“使用 Map#openPopup 打开弹出窗口，同时确保一次仅打开一个弹出窗口（为了可用性推荐），或使用 Map#addLayer 打开任意数量的弹出窗口。”

但是

http://leafletjs.com/reference.html#map-addlayer

没有给出如何实现这一目标的任何提示。

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

Answer 1

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

使用自动关闭选项

Answer 2

您必须将弹出窗口添加为图层。 尝试使用以下示例代码：

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);

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

Answer 4

这个解决方案对我有用：

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

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

Answer 5

在最新版本中，有一个自动关闭选项。

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

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();

Answer 6

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

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