如何在Folium中获取地图当前视图位置与缩放级别？

Folium本质是用Python生成Leaflet地图的工具，Python端的Map对象仅负责构建前端HTML/JS代码，用户与地图的交互发生在浏览器的JS环境中，因此无法直接通过Python调用getLocation()或getZoom()获取实时交互后的参数。需要通过前端JavaScript捕获数据，再传递给Python或保存下来，具体方案分两种场景：

场景1：网页应用（如Flask/Django） #

通过JS监听Leaflet地图的moveend和zoomend事件，获取当前视图参数后发送到后端保存，下次启动时加载保存的参数初始化地图。

示例代码（Flask） #

import folium
import json
from flask import Flask, request, jsonify

app = Flask(__name__)

# 主页：渲染地图并添加监听JS
@app.route('/')
def index():
    # 优先加载保存的地图状态
    try:
        with open('map_state.json', 'r') as f:
            state = json.load(f)
            m = folium.Map(location=[state['lat'], state['lng']], zoom_start=state['zoom'])
    except FileNotFoundError:
        # 无保存状态时用默认值
        m = folium.Map(location=[45.523, -122.675], zoom_start=13)
    
    # 添加JS监听地图事件，实时发送状态到后端
    js_code = """
    map.on('moveend zoomend', function() {
        const center = map.getCenter();
        const zoom = map.getZoom();
        fetch('/save_state', {
            method: 'POST',
            headers: {'Content-Type': 'application/json'},
            body: JSON.stringify({lat: center.lat, lng: center.lng, zoom: zoom})
        });
    });
    """
    folium.Element(js_code).add_to(m.get_root())
    return m._repr_html_()

# 后端接口：保存地图状态
@app.route('/save_state', methods=['POST'])
def save_state():
    data = request.get_json()
    with open('map_state.json', 'w') as f:
        json.dump(data, f)
    return jsonify({"status": "success"})

if __name__ == '__main__':
    app.run(debug=True)

场景2：静态HTML地图 #

添加一个保存按钮，点击时用JS获取当前视图参数，生成JSON文件让用户下载保存；下次启动时读取该JSON文件初始化地图。

示例代码 #

import folium
import json

# 加载保存的状态（如果存在）
try:
    with open('map_state.json', 'r') as f:
        state = json.load(f)
        m = folium.Map(location=[state['lat'], state['lng']], zoom_start=state['zoom'])
except FileNotFoundError:
    m = folium.Map(location=[45.523, -122.675], zoom_start=13)

# 添加保存按钮和对应的JS逻辑
save_ui = folium.Element("""
<button onclick="saveMapState()">保存当前视图</button>
<script>
function saveMapState() {
    const center = map.getCenter();
    const zoom = map.getZoom();
    const state = JSON.stringify({lat: center.lat, lng: center.lng, zoom: zoom});
    // 生成下载链接
    const blob = new Blob([state], {type: 'application/json'});
    const url = URL.createObjectURL(blob);
    const a = document.createElement('a');
    a.href = url;
    a.download = 'map_state.json';
    a.click();
    URL.revokeObjectURL(url);
}
// 实时打印当前状态到控制台（可选）
map.on('moveend zoomend', () => {
    console.log(`中心坐标: ${map.getCenter().lat}, ${map.getCenter().lng} 缩放级别: ${map.getZoom()}`);
});
</script>
""")
save_ui.add_to(m.get_root())

# 保存为静态HTML文件
m.save('map.html')

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