如何在Folium地图的分组复选框下方添加重置缩放的刷新按钮？

要实现点击按钮恢复地图初始缩放和位置，你需要在生成的HTML中插入自定义的按钮元素和JavaScript逻辑，具体修改如下：

修改后的完整代码 #

import folium
from folium import plugins

# 定义初始地图参数，方便后续复用
initial_location = [0, 0]
initial_zoom = 6

m = folium.Map(location=initial_location, zoom_start=initial_zoom)
fg = folium.FeatureGroup(name='groups')
m.add_child(fg)
g1 = plugins.FeatureGroupSubGroup(fg, 'group1')
m.add_child(g1)
g2 = plugins.FeatureGroupSubGroup(fg, 'group2')
m.add_child(g2)

folium.Marker([-1, -1]).add_to(g1)
folium.Marker([1, 1]).add_to(g1)
folium.Marker([-1, 1]).add_to(g2)
folium.Marker([1, -1]).add_to(g2)

folium.LayerControl(collapsed=False).add_to(m)

# 添加自定义重置按钮及逻辑
custom_html = f"""
<div style="position: absolute; top: 100px; right: 10px; z-index: 1000;">
    <button id="resetMapBtn" style="padding: 8px; background: white; border: 1px solid #ccc; border-radius: 4px; cursor: pointer;">重置地图</button>
</div>
<script>
    // 点击按钮时恢复初始地图状态
    document.getElementById('resetMapBtn').addEventListener('click', function() {{
        map.setView({initial_location}, {initial_zoom});
    }});
</script>
"""
# 将自定义元素添加到地图的HTML结构中
m.get_root().html.add_child(folium.Element(custom_html))

m.save('mapy_test.html')

关键说明 #

1. 初始参数复用：把地图初始的中心坐标和缩放级别抽成变量，方便JavaScript直接调用，避免硬编码。
2. 按钮定位：通过绝对定位（position: absolute）将按钮放在地图右上角的图层控件下方，z-index:1000确保按钮在地图元素上层。
3. 重置逻辑：使用map.setView()方法直接回到初始的中心和缩放级别，这比你找到的map.fit_bounds(map.get_bounds())更符合需求——后者是让地图自动适配所有可见标记的边界，而非恢复初始状态。

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