google maps 的 heatmaplayer 本身不支持原生 mouseover 事件，但可通过监听地图的 mousemove 事件并结合坐标匹配逻辑，实现近似 tooltip 效果——在用户悬停于热点密集区域时动态显示该位置附近的数据点数量。
google maps 的 heatmaplayer 本身不支持原生 mouseover 事件，但可通过监听地图的 mousemove 事件并结合坐标匹配逻辑，实现近似 tooltip 效果——在用户悬停于热点密集区域时动态显示该位置附近的数据点数量。
Google 官方文档明确指出：google.maps.visualization.HeatmapLayer 不触发任何鼠标事件（如 mouseover、click 等），因此直接为 heatmap 实例添加 google.maps.event.addListener(heatmap, 'mouseover', ...) 是无效的——这也是您代码中监听器“无响应”的根本原因。
不过，我们可以通过更底层、更可控的方式实现目标效果：监听地图（map）自身的 mousemove 事件，并在每次鼠标移动时，就近匹配原始数据点，再动态计算并展示局部密度信息。以下是经过优化的完整实现方案：
✅ 推荐方案：基于地图事件 + 空间邻近匹配
首先，确保已初始化 InfoWindow（用于显示 tooltip）：
const infoWindow = new google.maps.InfoWindow({
disableAutoPan: true,
});然后，在 createHeatMap 函数中，替换原有无效监听器，改用以下逻辑：
// 预处理：将原始坐标转为带唯一 ID 和精度控制的对象（提升匹配鲁棒性）
const heatmapData = coordinates.map((coord, idx) => ({
id: idx,
location: new google.maps.LatLng(coord.latitude, coord.longitude),
// 可选：预存四舍五入后的经纬度（减少实时计算开销）
latRounded: Math.round(coord.latitude * 10000),
lngRounded: Math.round(coord.longitude * 10000),
}));
// 创建 heatmap（保持原有逻辑）
const heatmap = new google.maps.visualization.HeatmapLayer({
data: heatmapData.map(d => d.location),
map: map,
});
// ...（保留您的 gradient/radius/maxIntensity/opacity 设置）
// ✅ 关键：监听地图 mousemove，实现“伪 tooltip”
let tooltipTimer: number | null = null;
const DEBOUNCE_MS = 50; // 防抖，避免频繁计算
const PROXIMITY_THRESHOLD_METERS = 30; // 视觉上“悬停到某点”的距离阈值（米）
map.addListener("mousemove", (e: google.maps.MapMouseEvent) => {
if (tooltipTimer) clearTimeout(tooltipTimer);
tooltipTimer = window.setTimeout(() => {
const mouseLatLng = e.latLng!;
let closestPoints: typeof heatmapData = [];
let minDistSq = Infinity;
// 遍历所有原始坐标，找距离鼠标位置最近的若干点（例如 50m 内）
for (const point of heatmapData) {
const distSq = google.maps.geometry.spherical.computeDistanceSquared(
mouseLatLng,
point.location
);
const distM = Math.sqrt(distSq);
if (distM <= PROXIMITY_THRESHOLD_METERS) {
closestPoints.push(point);
}
}
// 若有匹配点，显示聚合信息；否则关闭 tooltip
if (closestPoints.length > 0) {
const count = closestPoints.length;
const content = `<div style="font-size:14px; padding:6px 10px;">
<strong>? 热点区域</strong><br>
当前覆盖 <b>${count} 个坐标点</b>
</div>`;
infoWindow.setContent(content);
infoWindow.setPosition(mouseLatLng);
infoWindow.open(map);
} else {
infoWindow.close();
}
}, DEBOUNCE_MS);
});
// ✅ 可选增强：鼠标移出地图时自动关闭 tooltip
map.addListener("mouseout", () => {
if (tooltipTimer) clearTimeout(tooltipTimer);
infoWindow.close();
});⚠️ 注意事项与优化建议
- 性能考量：若坐标量极大（>10,000），全量遍历会卡顿。此时应引入空间索引（如 RBush 或 k-d tree）加速邻近查询。
- 精度权衡：PROXIMITY_THRESHOLD_METERS 值需根据地图缩放级别动态调整（例如 zoom > 14 时设为 10m，zoom < 12 时设为 100m），否则小比例尺下易漏匹配。
- 视觉一致性：可配合 heatmap.set('radius', ...) 调整热力点半径，使 tooltip 显示范围与视觉热点区域大致对齐。
- 替代思路（高级）：若需精确按“热力图渲染单元”（而非原始点）统计，需自行实现 Canvas 渲染层或使用第三方库（如 Deck.gl + Google Maps overlay），但复杂度显著上升。
该方案不依赖 HeatmapLayer 的内部机制，完全基于公开 API，兼容性好、逻辑清晰，且能真实反映“用户当前悬停位置附近的数据密度”，是目前最实用、可落地的 tooltip 解决方案。
