Leaflet.js：在頁面加載時打開所有彈出窗口

我試圖從Leaflet.js文檔中找到如何在顯示頁面時打開多個彈出窗口。例如，如果有三個標記（每個標記代表一棟建築物），則每個標記都會立即打開其彈出窗口。Leaflet.js：在頁面加載時打開所有彈出窗口

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

含糊地說：

「使用地圖＃openPopup打開彈出式窗口，同時確保只有一個彈出窗口開啓一次（推薦可用性），或使用地圖＃addLayer爲打開許多你想要的。「

但

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

沒有給出關於如何可能實現的提示。

任何人都可以澄清，如果這是可能的，並給出如何做到這一點的提示？

來源

2012-01-28 fooquency

您必須將彈出窗口添加爲圖層。嘗試使用此代碼示例：

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-29 11:59:02 aborruso

卓越 - 我真的很感激這個例子。我是否認爲沒有辦法在那裏既有圖標又有彈出窗口？ – fooquency 2012-01-29 23:09:41

嗨，我不知道。嘗試張貼在新的官方宣傳小組：https://groups.google.com/forum/#!forum/leaflet-js – aborruso 2012-01-31 20:32:03

下面使用類擴展的答案是一個更好的方法，應該是接受的答案 – masterchief 2014-05-19 21:06:27

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-23 07:22:57 gies0r

你能解釋一下這段代碼的實現嗎？非常感謝，如果你能解釋它。 – 2013-05-23 07:42:09

我編輯了我的答案。從創建者：「你可以」L.Class.Extend「默認的L.Map類，定義一個新的openPopup方法。這個新方法將是一個簡單的複製粘貼默認的，除了當前彈出的部分已關閉（只是評論該行）「。 – gies0r 2013-05-23 08:49:21

非常感謝@ gies0r，這段代碼像一個魅力一樣工作 – Kartik 2013-08-04 21:19:34

-1

triky的解決辦法是消除對開放地圖對象彈出鏈接：

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

來源

2014-05-14 13:33:02 IvanM

這將如何影響切換/關閉未來的彈出窗口？ – Ethereal 2014-05-30 17:12:23

在最新版本中，有一個utoClose選項。

兼得標記，並在彈出同一時間打開，但沒有明確加層：

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-09 13:12:29

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

使用自動關閉選項

來源

2016-10-25 14:21:09 thinhnk

Leaflet.js：在頁面加載時打開所有彈出窗口

回答

相關問題