在Folium地图开发中，默认的弹出窗口只能展示简单的文本或静态图片，无法满足复杂数据的可视化需求。通过结合动态图表库和Folium的自定义弹出窗口功能，可以在点击地图标记时展示可交互的动态图表，让地理数据和相关指标的结合展示更加直观。
实现核心思路
整个功能的实现分为三个核心步骤：首先生成Folium地图并添加标记点，然后创建动态图表并转换为可在网页中展示的格式，最后将图表内容嵌入到Folium的弹出窗口中。其中动态图表可以使用Plotly等支持网页渲染的库生成，Folium的Popup组件支持传入HTML内容，因此可以将图表的HTML代码直接作为弹出窗口的内容。
环境准备
需要先安装对应的依赖库，执行以下命令完成安装：
pip install folium plotly pandas
完整实现步骤
1. 准备示例数据
首先创建一份包含地理位置和相关指标的示例数据，用于后续的地图标记和图表生成：
import pandas as pd
# 构造示例数据，包含城市名称、经纬度、各月份销售额
data = {
"city": ["北京", "上海", "广州", "深圳"],
"lat": [39.9042, 31.2304, 23.1291, 22.5431],
"lng": [116.4074, 121.4737, 113.2644, 114.0579],
"month_1": [120, 150, 90, 110],
"month_2": [135, 160, 95, 125],
"month_3": [142, 172, 102, 130]
}
df = pd.DataFrame(data)
2. 生成动态图表并转换为HTML片段
使用Plotly生成每个城市对应的月度销售额折线图，然后将图表转换为独立的HTML字符串，方便后续嵌入弹出窗口：
import plotly.graph_objects as go
def generate_chart_html(row):
# 构造折线图数据
months = ["1月", "2月", "3月"]
sales = [row["month_1"], row["month_2"], row["month_3"]]
fig = go.Figure(data=go.Scatter(x=months, y=sales, mode="lines+markers"))
fig.update_layout(
title=f"{row['city']}月度销售额",
xaxis_title="月份",
yaxis_title="销售额（万元）",
width=400,
height=300,
margin=dict(l=20, r=20, t=40, b=20)
)
# 将图表转换为HTML字符串，不包含完整HTML结构
return fig.to_html(include_plotlyjs=False, full_html=False)
3. 创建Folium地图并集成弹出窗口
初始化Folium地图，遍历数据添加标记点，将生成的图表HTML作为弹出窗口内容：
import folium
# 初始化地图，中心设置为中国的中心位置
m = folium.Map(location=[35.0, 105.0], zoom_start=4)
# 遍历数据添加标记和弹出窗口
for idx, row in df.iterrows():
# 生成当前城市的图表HTML
chart_html = generate_chart_html(row)
# 创建弹出窗口，支持HTML内容
popup = folium.Popup(html=chart_html, max_width=450)
# 添加标记点
folium.Marker(
location=[row["lat"], row["lng"]],
popup=popup,
tooltip=row["city"]
).add_to(m)
# 保存地图为HTML文件
m.save("folium_dynamic_chart.html")
效果说明
运行上述代码后，会生成一个HTML文件，打开后可以看到地图上有四个城市的标记点，点击任意标记点，弹出窗口中会展示该城市对应的月度销售额动态折线图，用户可以将鼠标悬停在折线上查看具体数值，也可以缩放、平移图表查看细节。如果需要展示更复杂的图表，只需要修改generate_chart_html函数中的图表生成逻辑即可，Folium的弹出窗口支持所有标准的HTML内容。
注意事项
- 如果生成的地图HTML文件需要在离线环境使用，需要将Plotly的JS文件本地化，在
to_html方法中指定include_plotlyjs为本地路径，避免依赖在线CDN。 - 弹出窗口的
max_width参数需要根据图表的宽度调整，避免图表显示不全。 - 如果动态图表包含交互事件，需要确保图表的HTML代码没有和Folium地图的事件产生冲突，必要时可以调整图表的事件配置。