如何在Streamlit中结合Folium实现Marker悬停显示图片弹窗？

要实现鼠标悬停Marker时显示对应S3图片，你需要手动遍历DataFrame创建标记并绑定悬停提示框（Tooltip），因为add_circle_markers_from_xy方法无法直接自定义悬停内容。以下是修改后的代码：

import streamlit as st
import leafmap.foliumap as leafmap
import folium  # 直接调用folium的Tooltip和CircleMarker组件

st.dataframe(df)

m = leafmap.Map(center=(-31.416668, -64.183334), zoom=5)

# 遍历DataFrame每行数据，创建带悬停图片的标记
for idx, row in df.iterrows():
    # 提取经纬度和对应S3图片地址
    lon, lat = row["longitude"], row["latitude"]
    img_url = row["image"]
    
    # 构建悬停提示框：用HTML嵌入图片，可调整width/height适配显示
    tooltip = folium.Tooltip(f'<img src="{img_url}" width="200" height="150">')
    
    # 创建圆形标记并绑定悬停提示
    marker = folium.CircleMarker(
        location=[lat, lon],
        radius=5,  # 标记大小可按需调整
        color='blue',
        fill=True,
        fill_color='blue',
        fill_opacity=0.7
    ).add_child(tooltip)
    
    m.add_child(marker)

# 渲染地图到Streamlit页面
m.to_streamlit(width=700, height=500)

注意事项： #

• 若图片无法加载，需检查你的S3存储桶是否配置了CORS规则，允许Streamlit应用所在域名访问图片资源
• 可根据需求调整<img>标签的width和height参数，优化图片显示尺寸

内容的提问来源于stack exchange，提问作者Juan Cruz Alric Cortabarria