如何在Streamlit的Folium地图弹窗中嵌入HTML内容？

你当前的代码里，HTML内容和地图分开显示，核心原因是没有用Folium官方推荐的IFrame组件包裹HTML内容，导致弹窗无法正确嵌入渲染。以下是修正后的实现方案：

关键修正点 #

• 用folium.IFrame替代components.html，这是Folium嵌入自定义HTML内容到弹窗的标准方式
• 给Popup设置max_width属性，确保弹窗能自适应内容宽度
• 优化循环遍历方式，用iterrows更简洁高效

修正后的完整代码 #

# 遍历数据行，为每个坐标添加带Plotly图表弹窗的标记
for idx, row in df_final.iterrows():
    # 读取Plotly HTML文件内容
    with open(row['html_file'], 'rt', encoding='UTF8') as f:
        plotly_html = f.read()
    
    # 用IFrame包裹HTML内容，设置宽高和滚动
    iframe = folium.IFrame(
        html=plotly_html,
        width=850,
        height=400,
        scrolling=True
    )
    
    # 创建弹窗，绑定IFrame
    popup = folium.Popup(iframe, max_width=850)
    
    # 添加圆形标记到地图
    folium.Circle(
        location=[row['lats'], row['lngs']],
        radius=200,
        color='red',
        fill=True,
        fill_opacity=0.1,
        popup=popup
    ).add_to(map)

# 保存地图并在Streamlit中展示
map.save("index.html")
st_folium(map, returned_objects=[], width=1300, height=1000)

额外说明 #

• 使用with open上下文管理器读取文件，比直接open更安全，能自动关闭文件句柄
• max_width设为和IFrame宽度一致，避免弹窗出现不必要的滚动或布局错乱
• 如果Plotly HTML本身包含外部资源（比如CDN链接），确保环境能正常访问这些资源，否则图表可能无法渲染

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