如何为Folium Choropleth分级统计图添加自定义HTML弹窗

首先明确结论：不需要额外叠加PolyLine要素，直接复用你已创建的Choropleth实例的geojson子层即可实现自定义HTML内容的悬浮展示或点击弹窗。

实现步骤 #

1. 前置准备：填充自定义内容到GeoJSON属性 #

Tooltip和Popup只能读取GeoJSON的properties字段内的内容，所以你需要先把要展示的自定义内容（比如图片链接、额外说明文本等）提前合并到GeoJSON的属性中：

# 示例：将df中存储的每个多边形对应的图片链接、自定义HTML内容合并到polygons的properties中
for feature in polygons['features']:
    cur_shape_name = feature['properties']['shape_name']
    # 从df匹配对应记录
    match_row = df[df['shape_name'] == cur_shape_name].iloc[0]
    # 写入图片链接属性
    feature['properties']['img_url'] = match_row['img_url']
    # 直接拼接好完整的自定义HTML字符串存入属性
    feature['properties']['custom_content'] = f"""
    <h4>多边形名称：{cur_shape_name}</h4>
    <p>范围内点位数量：{match_row['number_of_points']}</p>
    <img src="{match_row['img_url']}" width="220px" style="border-radius: 4px;">
    """

2. 配置悬浮展示自定义HTML（替换原有Tooltip） #

修改你现有的GeoJsonTooltip配置，开启HTML渲染即可：

mm.geojson.add_child(folium.features.GeoJsonTooltip(
        fields=['custom_content'],
        aliases=[''], # 别名设为空，避免展示字段名
        style="background-color: #fff; padding: 12px; border-radius: 6px; border: 1px solid #eee;",
        localize=False, # 关键参数：关闭本地化转义，让HTML代码正常渲染
        sticky=True # 鼠标在要素范围内时提示框不消失
))

3. 可选：配置点击弹出自定义HTML窗口 #

如果需要点击要素才弹出内容，额外添加GeoJsonPopup即可，可与Tooltip共存：

mm.geojson.add_child(folium.features.GeoJsonPopup(
        fields=['custom_content'],
        aliases=[''],
        localize=False,
        max_width=300 # 调整弹窗最大宽度适配内容
))

注意事项 #

• 如果需要嵌入本地图片，建议将图片转为Base64编码写入<img>的src属性，避免HTML文件分享后图片路径失效
• 若不需要悬浮提示，仅保留点击弹窗，删除原有Tooltip的配置即可

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