以下 html 代碼為它們創建了幾個標記和彈出窗口。 ... 只是我省略的長內容的替代，因為它們對解決我的問題沒有意義。由于這些標記有數百個，一次性創建所有彈出窗口會導致網絡加載時間非常長。有沒有辦法僅在單擊標記時將彈出窗口添加到標記？下面的代碼已經生成，所以我無法使用新邏輯從頭開始重建它。var m1 = L.marker(...).addTo(map);var p1 = L.popup(...);var v1 = $('<div id="v1"></div>')[0];p1.setContent(v1);m1.bindPopup(p1);vegaEmbed(v1, ...)var m2 = L.marker(...).addTo(map);var p2 = L.popup(...);var v2 = $('<div id="v2"></div>')[0];p2.setContent(v2);m2.bindPopup(p2);vegaEmbed(v2, ...)var m3 = L.marker(...).addTo(map);var p3 = L.popup(...);var v3 = $('<div id="v3"></div>')[0];p3.setContent(v3);m3.bindPopup(p3);vegaEmbed(v3, ...)...and so on嘗試 Falke Design 提出的解決方案：到目前為止，我有以下 Python 代碼：m = folium.Map(...)fg = folium.FeatureGroup()for i in range(0,400): p = folium.Popup().add_child(folium.VegaLite(...)) folium.Marker(...popup = p).add_to(fg)fg.add_to(m)m.save('templates/index.html')生成以下 html：var fg = L.featureGroup({}).addTo(m);var m1 = L.marker(...).addTo(fg);var p1 = L.popup(...);var v1 = $('<div id="v1"></div>')[0]; p1.setContent(v1);m1.bindPopup(p1);vegaEmbed(v1, ...)...and so on up to 400
2 回答
UYOU
TA貢獻1878條經驗 獲得超4個贊
是的，有辦法。您可以向每個標記添加單擊事件，然后添加彈出窗口。
var fg = L.featureGroup().addTo(map);
var m1 = L.marker([51.505, -0.09]).addTo(fg);
var v1 = '<div id="v1">v1</div>';
m1.popcontent = v1; //custom property to safe the html to the marker
var m2 = L.marker([51.505, -0.094]).addTo(fg);
var v2 = '<div id="v2">v2</div>';
m2.popcontent = v2;
var m3 = L.marker([51.505, -0.096]).addTo(fg);
var v3 = '<div id="v3">v3</div>';
m3.popcontent = v3;
fg.on('click',function(e){
var layer = e.layer;
layer.bindPopup(layer.popcontent).openPopup();
});
如果您的 html 在 vegaEmbed 中更新，您必須將 html ID 保存到標記中，然后將其讀出。
var m1 = L.marker([51.505, -0.09]).addTo(fg);
var v1 = 'v1';
m1.popcontent = v1; //custom property to safe the id to the marker
fg.on('click',function(e){
var layer = e.layer;
layer.bindPopup($("#"+layer.popcontent).html()).openPopup(); // or document.getElementById(layer.popcontent).innerHTML;
});
示例：https://jsfiddle.net/falkedesign/56dLkq9h/
慕容708150
TA貢獻1831條經驗 獲得超4個贊
如果我理解正確（我可能不理解），您希望生成“光”以某種方式動態地從 folium 代碼中獲取 html 代碼。如果這是問題的話，答案是否定的。你不能。
來自Folium 文檔：
folium 建立在 Python 生態系統的數據處理優勢和 leaflet.js 庫的映射優勢之上。在 Python 中操作數據，然后通過 folium 在 Leaflet 地圖上將其可視化。
事實上，您的觀點在某種程度上是眾所周知的觀點。
- 2 回答
- 0 關注
- 243 瀏覽
添加回答
舉報
0/150
提交
取消