Folium地图弹窗渲染HTML时无法显示，如何实现弹窗格式化？

问题场景 #

尝试通过format_popup_content(row)函数生成HTML格式的弹窗内容，但添加到Folium地图后无法正常显示。以下是原尝试代码：

原HTML格式化函数 #

def format_popup_content(row):
    # Format the popup content using HTML
    popup_content = f"""
    <div style="font-family: Arial, sans-serif;">
        <h2 style="margin-bottom: 5px; text-align: center;">District: {row['district']}</h2>
        <table style="width: 100%;">
            <tr>
                <td style="font-weight: bold;">Diagnose:</td>
                <td>{row['provisionaldiagnose']}</td>
            </tr>
            <tr>
                <td style="font-weight: bold;">Age:</td>
                <td>{row['age']}</td>
            </tr>
            <tr>
                <td style="font-weight: bold;">Gender:</td>
                <td>{row['pgender']}</td>
            </tr>
            <!-- Add more information here if needed -->
        </table>
    </div>
    """
    return popup_content

原弹窗创建代码 #

popup_text = folium.Html(format_popup_content(row), script=True) 
iframe = branca.element.IFrame(html=popup_text, width=320, height=500)
popup = folium.Popup(iframe, parse_html=True)

# Update the color parameter to use the corresponding color from the color dictionary
folium.CircleMarker([lat, lon], radius=7, color=color, opacity=1.0, fill_color=color, popup=popup).add_to(district_layers[district])

问题原因 #

1. 生成的HTML字符串包含大量多余换行和缩进，易引发前端解析异常
2. 错误使用folium.Html包装普通HTML内容，script=True会添加不必要的脚本标签
3. folium.Popup的parse_html=True会二次解析已完成的HTML，导致格式混乱

修正方案 #

1. 优化HTML内容生成 #

清理字符串中的多余换行和缩进，避免解析问题：

def format_popup_content(row):
    popup_content = f"""<div style="font-family: Arial, sans-serif;">
        <h2 style="margin-bottom: 5px; text-align: center;">District: {row['district']}</h2>
        <table style="width: 100%;">
            <tr><td style="font-weight: bold;">Diagnose:</td><td>{row['provisionaldiagnose']}</td></tr>
            <tr><td style="font-weight: bold;">Age:</td><td>{row['age']}</td></tr>
            <tr><td style="font-weight: bold;">Gender:</td><td>{row['pgender']}</td></tr>
        </table>
    </div>"""
    return popup_content.strip()

2. 修正弹窗创建逻辑 #

直接将HTML字符串传递给IFrame，无需folium.Html包装，同时调整Popup参数：

# 直接生成HTML内容，无需folium.Html包装
popup_html = format_popup_content(row)
# 创建IFrame，传入HTML字符串并适配内容高度
iframe = branca.element.IFrame(html=popup_html, width=320, height=250)
# 创建Popup，关闭自动HTML解析
popup = folium.Popup(iframe, parse_html=False)

folium.CircleMarker(
    location=[lat, lon],
    radius=7,
    color=color,
    opacity=1.0,
    fill_color=color,
    popup=popup
).add_to(district_layers[district])

关键调整说明 #

• 移除folium.Html：仅当弹窗需包含JavaScript脚本时才需使用该类，普通HTML直接传递即可
• 关闭parse_html：parse_html=True会将HTML内容转义为纯文本，导致格式失效
• 调整IFrame高度：根据实际内容设置合适高度，避免多余滚动条或空白

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