如何为Folium热力图添加Tooltip？或设置隐形标记

问题背景 #

现有包含经纬度、热力密度（Count）和额外信息（Note）的数据集，需要为Folium热力图添加鼠标悬停Tooltip展示Note内容。直接添加Marker会遮挡热力图，以下是两种可行解决方案：

方案1：隐形Marker实现仅显示Tooltip #

通过创建完全透明的标记组件，既保留Tooltip功能，又不会遮挡下方热力图，有两种实现方式：

方式A：使用DivIcon创建透明图标 #

import folium
from folium.plugins import HeatMap
import pandas as pd

# 示例数据
heat_df = pd.DataFrame({'Latitude':[45.3288, 45.3311],
                        'Longitude':[-121.6625, -121.6625,],
                        'Count':[4, 2],
                        'Note':[10, 20]})

# 初始化地图
m = folium.Map([45.35, -121.6972], zoom_start=12)

# 生成热力图数据并添加到地图
heat_data = [[row['Latitude'], row['Longitude']] for _, row in heat_df.iterrows()]
HeatMap(heat_data).add_to(m)

# 添加隐形Marker
for _, row in heat_df.iterrows():
    # 创建完全透明的DivIcon
    transparent_icon = folium.DivIcon(html='<div style="opacity: 0;"></div>')
    folium.Marker(
        location=[row['Latitude'], row['Longitude']],
        tooltip=f'Tooltip value: {row["Note"]}',
        icon=transparent_icon
    ).add_to(m)

# 保存地图
m.save("test_invisible_marker.html")

方式B：使用Circle组件设置隐形样式 #

# 替代上述Marker循环部分的代码
for _, row in heat_df.iterrows():
    folium.Circle(
        location=[row['Latitude'], row['Longitude']],
        radius=0,  # 半径设为0，不显示图形
        tooltip=f'Tooltip value: {row["Note"]}',
        color='transparent',
        fill=False
    ).add_to(m)

两种方式均能让标记完全隐形，仅在鼠标悬停时显示Tooltip，不影响热力图视觉效果。

方案2：直接为热力图绑定Tooltip（进阶） #

Folium原生HeatMap不支持Tooltip，但可通过自定义JavaScript代码监听热力图鼠标事件，实现原生Tooltip效果，无需额外标记：

import folium
from folium.plugins import HeatMap
import pandas as pd

# 示例数据
heat_df = pd.DataFrame({'Latitude':[45.3288, 45.3311],
                        'Longitude':[-121.6625, -121.6625,],
                        'Count':[4, 2],
                        'Note':[10, 20]})

# 初始化地图
m = folium.Map([45.35, -121.6972], zoom_start=12)

# 准备包含Note的热力数据（格式：[纬度, 经度, 密度值, 额外信息]）
heat_data = [[row['Latitude'], row['Longitude'], row['Count'], row['Note']] for _, row in heat_df.iterrows()]

# 添加热力图并获取实例
heat_map = HeatMap(heat_data).add_to(m)

# 自定义JS代码实现热力图悬停Tooltip
custom_js = f"""
var heatLayer = {heat_map.get_name()};
var tooltip = L.tooltip({{permanent: false, direction: 'top'}});

// 监听鼠标悬停事件
heatLayer.on('mousemove', function(e) {{
    // 获取当前点的Note数据
    var note = e.layer._latlngs[e.layer._index][3];
    tooltip.setContent('Tooltip value: ' + note)
           .setLatLng(e.latlng)
           .openOn(map);
}});

// 监听鼠标离开事件，移除Tooltip
heatLayer.on('mouseout', function() {{
    tooltip.removeFrom(map);
}});
"""

# 将JS代码添加到地图
folium.Element(custom_js).add_to(m.get_root())

# 保存地图
m.save("test_heatmap_tooltip.html")

该方案的Tooltip直接绑定在热力图上，会跟随鼠标在热力区域移动，交互体验更贴合热力图逻辑，但需要了解基础的Leaflet JS语法。

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