Python folium - 圆圈无法与弹出窗口一起使用

Question

我在这里找到了一些不错的解决方案：

How to create on click popup which includes plots using ipyleaflet, Folium or Geemap?

这可能会允许我在单击时为标记分配更多内容。在我的情况下，我有很多圆圈分配给标记，但它们看起来都不太好。

我需要在单击标记时填充 folium.Circle。它可能与弹出信息一起出现。

我的代码如下所示：

fm = folium.Marker(
   location=[lat,lng],
   popup=folium.Popup(max_width=450).add_child(
   folium.Circle(
       [lat,lng],
       radius=10,
       fill=True,
       weight=0.2)),
    icon = folium.Icon(color='darkpurple', icon='glyphicon-briefcase'))
  map.add_child(fm)

不幸的是，它不起作用，因为我的地图没有某些功能：

尽管 Python 的控制台端没有错误，但地图控制台出现错误

未捕获的类型错误：无法读取未定义的属性（读取“addLayer”） 在 i.addTo (leaflet.js:5:64072)

我不知道如何解决它

是否可以选择在单击标记时填充我的圈子？

更新：

使用这种方法：

 mapCirclVar = map.get_name()

 js_f = """
 $(document).ready(function () {
 function onClick(e) {
    var circle = L.circle([e.latlng.lat, e.latlng.lng], {radius: 10, 
 fill: true, weight: 0.2}).addTo({map});
 }
 circle.on('click', function (e) {
 alert("Hello, circle!");
 });
 });
 """.replace("{map}", mapCirclVar)


 ci.add_child(
        folium.Marker(location=[lat,lng],
                  tooltip='<strong>City to survey:</strong> ' + city,
                  popup=js_f,
                  icon = folium.Icon(color='red', icon='glyphicon- calendar'
                                     )
                ))

我在弹出窗口中看到一些混乱，而不是我想看到的...

更新二：

Show path in folium map by clicking or hovering marker

根据此胎面的答案，我尝试了以下方法：

from folium.map import Marker, Template

job_range = """
{% macro script(this, kwargs) %}
$(document).ready(function() {
function onClick(e) {
 var circle = L.circle([e.latlng.lat, e.latlng.lng],{
 radius: 10,
 fill: true,
 weight: 0.2}).addTo{{ this._parent.get_name() }};
}
circle.on('click', function (e) {
alert("Hello, circle!");
});
});
{% endmacro %}
"""

  Marker._template = Template(job_range)

但它也不起作用，因为控制台说无法识别标记。另一个例子：

js_f = """
$(document).ready(function () {
function onClick(e) {
    var circle = L.circle([e.latlng.lat, e.latlng.lng], {radius: 10, 
fill: true, weight: 0.2}).addTo({map});
}
circle.on('click', function (e) {
alert("Hello, circle!");
});
});
""".replace("{map}", mapCirclVar)


e = folium.Element(js_f)
html = map.get_root()
html.script.add_child(e)

还是不好。

Answer 1

不一定是最好的方法 - 但可以顺利替代@gentleslaughter 的实施：

您可以在 folium.Marker 中使用 click_action 参数和一个 JavaScript 函数，只要单击标记，它就会将圆圈添加到地图中！

js_f= """
    function onClick(e) {
        var circle = L.circle([e.latlng.lat, e.latlng.lng], {radius: 10, fill: true, weight: 0.2}).addTo(map);
    }
"""

这里的 folium.Marker 与 click_action 完全相同：

fm = folium.Marker(
    location=[lat, lng],
    popup=folium.Popup(max_width=450),
    icon=folium.Icon(color='darkpurple', icon='glyphicon-briefcase'),
    click_action=js_f,
)
map.add_child(fm)