Question

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

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

隐晦地说：

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

但

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

没有提供关于如何实现这一点的提示。

任何人都可以澄清这是否可行，并提供有关如何做的任何提示？

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

Answer 2

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 3

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

使用autoClose选项

Answer 4

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

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

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

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

5 个答案: