15

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

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

神秘地说：

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

但

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

没有暗示如何实现这一目标。

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

4

5 回答 5

12

您必须将弹出窗口添加为图层。试试这个示例代码：

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);
于 2012-01-29T11:59:02.957 回答
11 
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

于 2013-05-23T07:22:57.783 回答
10 
marker.addTo(myMap).bindPopup('Hello popup', {autoClose:false}).openPopup();

使用自动关闭选项

于 2016-10-25T14:21:09.207 回答
-1

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

map.on('popupopen', function (e) {
    delete map._popup;
});
于 2014-05-14T13:33:02.830 回答
-1

在最新版本中，有一个 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();
于 2016-09-09T13:12:29.450 回答