如何基于属性值动态过滤Folium中的圆形标记？

你可以通过在生成的地图中嵌入自定义HTML输入框和JavaScript逻辑来实现实时过滤，无需依赖分组控件。以下是修改后的完整代码：

import folium

data = [
    {"lat": 37.7749, "lon": -122.4194, "value": 10, "name": "Location A"},
    {"lat": 34.0522, "lon": -118.2437, "value": 20, "name": "Location B"},
    {"lat": 40.7128, "lon": -74.0060, "value": 15, "name": "Location C"},
    {"lat": 41.8781, "lon": -87.6298, "value": 5, "name": "Location D"}
]

# 初始化地图
m = folium.Map(location=[39.8283, -98.5795], zoom_start=4)

# 添加圆形标记，使用标准自定义属性确保JS可读取
for item in data:
    circle = folium.Circle(
        location=[item["lat"], item["lon"]],
        radius=100000,
        color='blue',
        fill=True,
        fill_color='blue',
        fill_opacity=0.6,
        popup=f"{item['name']}: {item['value']}",
        # 采用HTML标准data-*属性格式
        attr=f'data-value="{item["value"]}"'
    )
    circle.add_to(m)

# 添加过滤输入框和JS逻辑
filter_html = """
<div style="position: fixed; top: 10px; right: 10px; z-index: 1000; background: white; padding: 10px; border-radius: 5px; box-shadow: 0 0 5px rgba(0,0,0,0.3);">
    <label for="valueFilter">过滤值：</label>
    <input type="number" id="valueFilter" placeholder="输入数值过滤" min="0">
</div>

<script>
document.getElementById('valueFilter').addEventListener('input', function(e) {
    const filterValue = parseInt(e.target.value);
    // 获取所有带data-value属性的圆形元素
    const circles = document.querySelectorAll('[data-value]');
    
    circles.forEach(circle => {
        const value = parseInt(circle.getAttribute('data-value'));
        // 根据输入值控制显示/隐藏
        if (isNaN(filterValue) || value >= filterValue) {
            circle.style.display = '';
        } else {
            circle.style.display = 'none';
        }
    });
});
</script>
"""

# 将自定义HTML添加到地图
m.get_root().html.add_child(folium.Element(filter_html))

m.save('map.html')

关键说明： #

• 把原来的自定义属性改为标准data-value格式，这是HTML规范的自定义属性写法，能让JavaScript更稳定读取数值
• 过滤输入框采用固定定位，放在地图右上角，避免遮挡地图内容，z-index确保控件处于最上层
• JavaScript监听输入框的实时输入事件，遍历所有圆形标记，通过对比数值控制元素的显示/隐藏状态
• 处理了输入非数字的情况，此时会自动显示所有标记

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