仅当标记被单击时，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 markervar 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){&nbsp; &nbsp; var layer = e.layer;&nbsp; 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 markerfg.on('click',function(e){&nbsp; &nbsp; var layer = e.layer;&nbsp; &nbsp; 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 地图上将其可视化。事实上，您的观点在某种程度上是众所周知的观点。