如何在Folium地图标记弹窗中嵌入Plotly图表？

你尝试的三种方法均存在不同的技术问题，以下是问题分析及可行的解决办法：

原方法问题分析 #

• 方法一（Vega）：folium.Vega仅支持Vega/Vega-Lite格式的图表定义，而Plotly导出的JSON是自身独有的结构，两者完全不兼容，因此该方法从根本上不可行。
• 方法二（iframe）：使用fig.to_html(full_html=True)会生成包含完整<html>/<body>标签的完整HTML文档，嵌入iframe后会形成嵌套文档结构，导致浏览器无法正常渲染。同时设置的图表宽高与iframe尺寸不匹配，也会影响显示效果。
• 方法三（纯HTML）：拼接的iframe语法完全错误——fightml是HTML片段而非URL，不能直接作为iframe属性值；且变量名拼写错误（popoup应为popup），导致弹窗未正确绑定到标记。

可行方案一：修正iframe方法 #

将full_html设为False，仅生成Plotly图表的核心HTML片段，同时匹配iframe的宽高参数：

import plotly.express as px
import folium

geomap = folium.Map([19.715576, -99.20099], zoom_start=9, tiles="OpenStreetMap")

df = px.data.gapminder().query("country=='Canada'")
fig = px.line(df, x="year", y="lifeExp", title='Life expectancy in Canada')
fig.update_layout(margin=dict(t=30, l=10, b=10, r=10))  # 调整标题边距避免截断

coor1 = [19.742110608748604, -99.01751491998121]

# 修正后的iframe实现
fig_html = fig.to_html(full_html=False, default_width=450, default_height=300)
iframe = folium.IFrame(html=fig_html, width=500, height=350)
popup = folium.Popup(iframe, max_width=500)

folium.Marker(
    coor1,
    popup=popup,
    icon=folium.Icon(color="blue", prefix='fa', icon='plane'),
    tooltip="airport"
).add_to(geomap)

# 保存地图（Notebook中可替换为display(geomap)）
geomap.save("map_with_plotly.html")

可行方案二：直接嵌入HTML片段 #

无需iframe，直接将Plotly的HTML片段嵌入弹窗，开启script=True加载所需脚本：

import plotly.express as px
import folium

geomap = folium.Map([19.715576, -99.20099], zoom_start=9, tiles="OpenStreetMap")

df = px.data.gapminder().query("country=='Canada'")
fig = px.line(df, x="year", y="lifeExp", title='Life expectancy in Canada')
fig.update_layout(margin=dict(t=30, l=10, b=10, r=10))

coor1 = [19.742110608748604, -99.01751491998121]

# 直接嵌入图表HTML
fig_html = fig.to_html(full_html=False)
popup = folium.Popup(folium.Html(fig_html, script=True), max_width=500)

folium.Marker(
    coor1,
    popup=popup,
    icon=folium.Icon(color="blue", prefix='fa', icon='plane'),
    tooltip="airport"
).add_to(geomap)

geomap.save("map_with_plotly.html")

注意事项 #

• 保存地图后需在浏览器中打开（Notebook内显示需确保环境能正常加载Plotly的CDN脚本）
• 调整图表的margin参数，避免标题或内容被弹窗边界截断
• 离线环境使用时，建议提前下载Plotly本地脚本，替换HTML中的CDN链接

内容的提问来源于stack exchange，提问作者Christian Álvarez