Flask框架下通过JavaScript传参无刷新更新Folium地图的实现方法

Folium 是 Leaflet JS 库的 Python 封装，你页面中已经渲染完成的地图本质就是原生 Leaflet 地图实例，更新地图显示完全不需要和后端交互，直接操作前端 Leaflet API 即可，完全满足你不发请求、不刷新页面、不跳转路由的要求。

操作步骤 #

1. （可选）修改后端代码固定地图DOM ID #

为了方便前端精准获取地图元素，你可以在创建Folium地图时添加element_id参数，固定地图容器的ID：

@app.route("/")
@app.route("/index")
def index():
    start_coords = (42.9974521, -78.7907883)
    # 新增element_id参数固定地图容器ID
    folium_map = folium.Map(location=start_coords, zoom_start=14, element_id="main_map")
    _ = folium_map._repr_html_()
    map_div = Markup(folium_map.get_root().html.render())
    hdr_txt = Markup(folium_map.get_root().header.render())
    script_txt = Markup(folium_map.get_root().script.render())
    return render_template("index.html", map_div=map_div, hdr_txt=hdr_txt, script_txt=script_txt)

修改后重新启动Flask项目即可，其余后端逻辑无需调整。

2. 前端直接更新地图坐标 #

你可以直接在现有JS代码中获取已渲染的地图实例，调用原生Leaflet方法更新坐标：

const coordinates = {latitude: 7.23, longitude: -4.05}
// 获取地图实例
const mapInstance = document.getElementById('main_map')._leaflet_map
// 更新地图中心坐标，第二个参数为缩放级别，这里复用当前已有的缩放级别
mapInstance.setView([coordinates.latitude, coordinates.longitude], mapInstance.getZoom())

如果你不想修改后端代码固定ID，也可以通过Folium默认的class属性获取地图元素：

const coordinates = {latitude: 7.23, longitude: -4.05}
const mapElement = document.querySelector('.folium-map')
const mapInstance = mapElement._leaflet_map
mapInstance.setView([coordinates.latitude, coordinates.longitude], mapInstance.getZoom())

补充说明 #

如果你确实需要将新坐标同步到后端做持久化存储，本质上必须通过异步请求实现，不存在完全不与后端通信就能同步数据的方案。如果仅需要更新前端地图显示，使用上述方案即可，无需和后端交互。

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