Javascript bindPopup（）仅在单击标记时才显示标记

下面的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

这将生成以下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

var fg=L.featureGroup（{}）.addTo（m）；
var m1=L.标记（…）.添加到（fg）；
变量p1=L.popup（…）；
var v1=$（''）[0]；
p1.设置内容（v1）；
m1.1（p1）；
素食床（v1，…）
.
.
.
以此类推，高达400

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

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();
});

---

示例：

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

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();
});

示例：

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

发件人：

folium建立在Python生态系统的数据争用优势和plicate.js库的映射优势之上。用Python操作数据，然后通过folium在传单地图上可视化数据

事实上，您的观点是众所周知的。

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

发件人：

folium建立在Python生态系统的数据争用优势和plicate.js库的映射优势之上。用Python操作数据，然后通过folium在传单地图上可视化数据

---

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

嗨，福克，非常感谢你的解决方案。由于我的html代码是从Python生成的（使用folium），有没有办法在Python中设置它，然后在html文件中添加fg.on（'click'）？我已经更新了上面的代码以包含Python代码。我还根据我的Python代码包含了您建议的html输出。我从来没有使用folium进行过编码，但我觉得您可以添加自定义属性：

folium.Marker（…popcontent=html）。add_to（fg）

我希望这会直接将属性

popcontent

添加到标记中。然后创建var html，比如

html=folium.VegaLite（…）

尝试一下。不幸的是，在html文件中找不到popcontent。很好，我将选择在弹出窗口中显示图像，而不是使用vega图表，以减少页面加载时间。非常感谢你的时间和努力！嗨，福尔克，非常感谢你的解决方案。由于我的html代码是从Python生成的（使用folium），有没有办法在Python中设置它，然后在html文件中添加fg.on（'click'）？我已经更新了上面的代码以包含Python代码。我还根据我的Python代码包含了您建议的html输出。我从来没有使用folium进行过编码，但我觉得您可以添加自定义属性：

folium.Marker（…popcontent=html）。add_to（fg）

我希望这会直接将属性

popcontent

添加到标记中。然后创建var html，比如

html=folium.VegaLite（…）

尝试一下。不幸的是，在html文件中找不到popcontent。很好，我将选择在弹出窗口中显示图像，而不是使用vega图表，以减少页面加载时间。非常感谢你的时间和努力！

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;
});