bindPopup() 仅当标记被点击时

Question

以下 html 代码为它们创建了几个标记和弹出窗口。 ... 只是替代了我忽略的冗长内容，因为它们对解决我的问题没有意义。由于有 100 个这样的标记，一次创建所有弹出窗口会导致非常长的 Web 加载时间。

有没有办法以某种方式仅在单击标记时将弹出窗口添加到标记？下面的代码已经生成，所以我无法使用新的逻辑从头开始重建它。

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 代码生成 "light" html 代码。如果这是问题，答案是否定的。你不能。

来自 Folium's doc :

folium builds on the data wrangling strengths of the Python ecosystem and the mapping strengths of the leaflet.js library. Manipulate your data in Python, then visualize it in on a Leaflet map via folium.

事实上，你的观点somewhat是一个众所周知的观点。

bindPopup() 仅当标记被点击时

bindPopup() to markers only when they are clicked on

html

javascript

python

leaflet

folium