如何使用Python Folium的Marker组件存储图片、视频等自定义信息

核心是通过folium.Marker的popup参数传入包含自定义资源的HTML内容，所有浏览器支持的媒体格式都可以通过这种方式嵌入。

具体实现步骤 #

• 构造包含图片、视频标签的HTML代码段，可根据需求调整标签的宽高、样式
• 将HTML代码传入folium.Popup生成弹窗实例，需配置max_width避免内容显示异常
• 将弹窗实例赋值给folium.Marker的popup参数即可

完整代码示例 #

import folium

# 初始化底图
current_map = folium.Map(location=[39.9, 116.4], zoom_start=12)
lat, long = 39.9, 116.4
image_path = "sample.png"
video_path = "sample.mp4"

# 组装自定义弹窗的HTML内容，支持任意HTML标签
popup_html = f"""
<h4>点位信息</h4>
<p>现场实拍图：</p>
<img src="{image_path}" width="220px" style="border-radius:4px">
<br>
<p>监控视频片段：</p>
<video controls width="220px" style="border-radius:4px">
  <source src="{video_path}" type="video/mp4">
</video>
"""

# 生成弹窗实例，设置最大宽度适配内容
custom_popup = folium.Popup(popup_html, max_width=260)

# 添加标记到地图
folium.Marker(
    location=[lat, long],
    popup=custom_popup,
    # 可额外配置图标样式等参数
    icon=folium.Icon(color="blue", icon="camera")
).add_to(current_map)

# 导出地图文件
current_map.save("custom_marker_map.html")

注意事项 #

• 若使用网络资源，直接将标签的src属性替换为资源的完整URL即可
• 若使用本地资源，需保证导出的HTML文件和图片、视频的相对路径和代码中填写的路径一致，否则会出现资源加载失败的问题
• 如果需要把资源直接嵌入HTML文件避免路径依赖，可以先将图片/视频转为Base64编码，直接填入src属性，格式为src="data:image/png;base64,你的Base64编码内容"

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