Python-Jinja2模板仅读取首条数据，如何实现Marker点击显示对应半径圆形？

问题核心 #

你遇到的问题是所有Marker点击后弹出的Circle都使用CSV首条记录的半径，原因是没有为每个Marker绑定对应的专属半径数据，模板/全局变量共用了同一个值，导致所有点击事件都读取同一个半径。

解决思路 #

给每个Marker关联自身对应的半径数据，点击时从当前触发事件的Marker上读取专属半径，而非调用全局变量。具体分两步：

• 在Python生成Marker时，为每个Marker附加自定义数据（存储对应半径）
• 编写全局JavaScript事件监听，点击Marker时读取其自定义半径并生成对应Circle

代码实现 #

Python部分（生成带自定义数据的Marker） #

import folium
import csv

# 初始化地图
m = folium.Map(location=[40, -100], zoom_start=4)
map_name = m.get_name()  # 获取地图的JS变量名，用于后续JS代码

# 读取CSV并生成Marker
with open('your_data.csv', 'r', encoding='utf-8') as f:
    reader = csv.DictReader(f)
    for row in reader:
        lat = float(row['latitude'])
        lon = float(row['longitude'])
        radius = float(row['radius'])  # 从当前行读取对应半径
        
        # 创建Marker，并在options中添加自定义数据
        marker = folium.Marker(
            location=[lat, lon],
            icon=folium.Icon(color='green')
        )
        # 将当前行的半径存入Marker的自定义属性
        marker.options['customRadius'] = radius
        m.add_child(marker)

# 添加全局JS事件监听
custom_js = folium.Element(f"""
<script>
document.addEventListener('DOMContentLoaded', function() {{
    // 监听地图上的点击事件
    {map_name}.on('click', function(e) {{
        // 判断点击的是Marker
        if (e.target instanceof L.Marker) {{
            var targetMarker = e.target;
            // 从Marker的自定义属性中读取对应半径
            var targetRadius = targetMarker.options.customRadius;
            var markerLatLng = targetMarker.getLatLng();
            
            // 移除已存在的动态Circle（避免重复创建）
            {map_name}.eachLayer(function(layer) {{
                if (layer instanceof L.Circle && layer._container.id === 'dynamic-circle') {{
                    {map_name}.removeLayer(layer);
                }}
            }});
            
            // 创建对应半径的Circle并添加到地图
            L.circle(markerLatLng, {{
                radius: targetRadius,
                color: '#ff4444',
                fillColor: '#ffaaaa',
                fillOpacity: 0.4
            }}).addTo({map_name})._container.id = 'dynamic-circle';
        }}
    }});
}});
</script>
""")
m.add_child(custom_js)

# 保存地图
m.save('map_with_dynamic_circles.html')

关键说明 #

1. 绑定自定义数据：通过marker.options['customRadius'] = radius将当前行的半径直接存入Marker的JS配置中，每个Marker都有自己的专属半径值。
2. 全局事件监听：通过地图的click事件委托，无需为每个Marker单独绑定事件，点击时判断目标是Marker，再读取其自定义半径生成Circle。
3. 清理旧Circle：每次点击前移除之前创建的动态Circle，避免地图上堆积多个圆形。

为什么之前的代码失效？ #

你之前的实现可能是将半径存在全局变量中（比如循环外定义radius，循环内更新但模板只取到初始/最后一次的值），或者Circle的半径直接引用了全局的模板变量，导致所有Marker点击都调用同一个值。现在的方案让每个Marker携带自己的半径数据，从根源解决了数据不匹配的问题。

内容的提问来源于stack exchange，提问作者Geographos