如何让Folium地图适配Flask页面中的div容器

通过Flask接口返回Folium生成的地图HTML，用JavaScript插入到固定尺寸的div容器中，但地图尺寸远大于容器，调整folium.Map的width/height参数无效。

解决思路 #

Folium生成的地图HTML包含固定尺寸的内联样式，且Leaflet地图初始化时依赖容器的初始尺寸，动态插入后无法自动适配。需要从三个方面调整：

• 给父容器添加样式限制溢出并定位
• 设置Folium地图占满父容器
• 动态插入后触发Leaflet地图重绘

修改后的app.py #

import folium
from flask import Flask, render_template

app = Flask(__name__)

@app.route('/')
def index():
    return render_template('index.html')

@app.route('/map')
def map():
    # 设置地图宽高为100%以适配父容器，关闭全屏控件避免布局冲突
    folium_map = folium.Map(
        location=[39.750855, -101.533079],
        width="100%",
        height="100%",
        control_scale=False
    )
    return folium_map.get_root()._repr_html_()

修改后的templates/index.html #

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #smallDiv {
            height: 40vh;
            width: 100%;
            background: aqua;
            /* 添加定位和溢出隐藏，限制子元素范围 */
            position: relative;
            overflow: hidden;
        }
    </style>
</head>
<body style="background-color: rgb(128,128,128);">
    <div id="smallDiv"></div>
    <script>
        setTimeout(() => {
            fetch('/map')
            .then(response => response.text())
            .then(data => {
                const container = document.getElementById('smallDiv');
                container.innerHTML = data;
                // 插入后延迟触发Leaflet地图重绘，确保容器尺寸已生效
                setTimeout(() => {
                    if (window.map) {
                        window.map.invalidateSize();
                    }
                }, 100);
            })
        }, 3000);
    </script>
</body>
</html>

关键调整说明 #

1. 父容器样式：添加position: relative让地图的绝对定位基于容器，overflow: hidden直接截断超出容器的地图部分
2. Folium参数：设置width和height为100%，让地图容器完全填充父容器；关闭全屏控件避免布局冲突
3. 重绘触发：动态插入地图后调用map.invalidateSize()，强制Leaflet重新计算并适配当前容器的尺寸

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