仅当标记被单击时，bindPopup() 才绑定到标记

Question

以下 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

Answer 1

是的，有办法。您可以向每个标记添加单击事件，然后添加弹出窗口。

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/

Answer 2

如果我理解正确（我可能不理解），您希望生成“光”以某种方式动态地从 folium 代码中获取 html 代码。如果这是问题的话，答案是否定的。你不能。

来自Folium 文档：

folium 建立在 Python 生态系统的数据处理优势和 leaflet.js 库的映射优势之上。在 Python 中操作数据，然后通过 folium 在 Leaflet 地图上将其可视化。

事实上，您的观点在某种程度上是众所周知的观点。