如何为folium生成的地图自动添加可跳转指定位置的按钮（解决地图对象动态哈希命名问题）

我完全懂你这个困扰——folium每次生成HTML时，地图对象的变量名都会带一串随机哈希，手动改JS代码实在太折腾了。其实不用事后用正则去改HTML，有两个更优雅的方法能自动搞定这个问题：

方法一：直接使用folium地图对象的内置变量名 #

folium的Map对象本身就带有一个_name属性，它的值就是生成HTML时那个带哈希的地图变量名（比如你看到的map_931983127ff2ad4bbeb40856ea0710c9）。我们只需要在生成按钮的HTML代码时，直接把这个变量名插入到JS函数里就行：

import folium

m = folium.Map(location=[48.8566, 2.3522], zoom_start=10)

# 利用m._name直接获取地图的动态变量名
buttons_html = f"""
<div style="position: fixed; top: 10px; left: 50px; z-index: 1000;">
    <button onclick="jumpToCity(48.8566, 2.3522, 12)">Paris</button>
    <button onclick="jumpToCity(51.5074, -0.1278, 12)">London</button>
</div>
<script>
    function jumpToCity(lat, lng, zoom) {{
        {m._name}.setView([lat, lng], zoom);
    }}
</script>
"""

m.get_root().html.add_child(folium.Element(buttons_html))
m.save('output.html')

这样生成的JS代码会直接调用正确的地图变量，完全不用手动修改哈希串，按钮点击就能直接跳转。

方法二：通过地图容器ID获取地图对象 #

如果你更习惯用DOM元素的方式获取地图，也可以利用地图容器的ID（同样就是m._name的值）来定位，这种方式在页面有多个Leaflet容器时更可靠：

import folium

m = folium.Map(location=[48.8566, 2.3522], zoom_start=10)

buttons_html = f"""
<div style="position: fixed; top: 10px; left: 50px; z-index: 1000;">
    <button onclick="jumpToCity(48.8566, 2.3522, 12)">Paris</button>
    <button onclick="jumpToCity(51.5074, -0.1278, 12)">London</button>
</div>
<script>
    function jumpToCity(lat, lng, zoom) {{
        // 通过地图容器ID获取对应的地图对象
        const mapDiv = document.getElementById('{m._name}');
        const map = mapDiv._leaflet_map;
        map.setView([lat, lng], zoom);
    }}
</script>
"""

m.get_root().html.add_child(folium.Element(buttons_html))
m.save('output.html')

这两种方法都能完美解决地图对象动态命名的问题，再也不用手动去改生成后的HTML啦！

备注：内容来源于stack exchange，提问作者Thomas