如何为Google热力图添加鼠标悬停提示以显示区域坐标数量？

问题背景 #

我开发了一个基于Google API的HTML/JavaScript地图页面，通过Google热力图绘制坐标列表。现需为热力图添加tooltip（鼠标悬停监听），当用户悬停在热力图的某一区域时，弹出提示框显示该区域的坐标总数。热力图数据为分散的集群形式，例如小镇一侧有2个坐标的集群，另一侧有500个坐标的独立集群。

现有代码 #

function createHeatMap(coordinates) {
    var map = new google.maps.Map(document.getElementById('map'), {
        center: { lat: 33.xxxxxx, lng: -84.xxxxxx },
        zoom: 13.4,
        maxZoom: 15,
    });

    var heatmapData = [];

    coordinates.forEach(function (coord) {
        var latLng = new google.maps.LatLng(coord.latitude, coord.longitude);
        heatmapData.push(latLng);
    });

    heatmap = new google.maps.visualization.HeatmapLayer({
        data: heatmapData,
        map: map,
    });
    const gradient = [
        "rgba(0, 255, 255, 0)",
        "rgba(0, 255, 255, 1)",
        "rgba(0, 191, 255, 1)",
        "rgba(0, 127, 255, 1)",
        "rgba(0, 63, 255, 1)",
        "rgba(0, 0, 255, 1)",
        "rgba(0, 0, 223, 1)",
        "rgba(0, 0, 191, 1)",
        "rgba(0, 0, 159, 1)",
        "rgba(0, 0, 127, 1)",
        "rgba(63, 0, 91, 1)",
        "rgba(127, 0, 63, 1)",
        "rgba(191, 0, 31, 1)",
        "rgba(255, 0, 0, 1)",
    ];

    heatmap.set('radius', 20);
    heatmap.set('gradient', gradient);
    heatmap.set('maxIntensity', 2);
    heatmap.set("opacity", 0.35);

    //Add mouse over listener to display # of coordinates 
}

无效尝试 #

曾尝试为heatmap添加mouseover事件监听以显示总坐标数（未按集群拆分），但悬停时无任何反应：

google.maps.event.addListener(heatmap, 'mouseover', function (event) {
    var totalCoordinates = heatmapData.length;
    var content = 'Total Coordinates: ' + totalCoordinates;

    infoWindow.setContent(content);
    infoWindow.setPosition(event.latLng);
    infoWindow.open(map);
 });

google.maps.event.addListener(heatmap, 'mouseout', function () {
    infoWindow.close();
});

解决方案 #

Google热力图图层基于Canvas渲染，本身不支持mouseover这类区域交互事件，需要通过地图的鼠标事件结合坐标距离判断来实现需求：

实现思路 #

1. 初始化一个InfoWindow用于显示提示
2. 监听地图的mousemove事件，获取鼠标当前位置
3. 遍历所有坐标点，计算每个点与鼠标位置的距离，统计落在热力图半径范围内的点数量
4. 根据统计结果显示或关闭InfoWindow

修改后的完整代码 #

function createHeatMap(coordinates) {
    var map = new google.maps.Map(document.getElementById('map'), {
        center: { lat: 33.xxxxxx, lng: -84.xxxxxx },
        zoom: 13.4,
        maxZoom: 15,
    });

    var heatmapData = [];
    // 保存原始坐标数据，方便后续计算
    var rawCoordinates = coordinates.map(coord => new google.maps.LatLng(coord.latitude, coord.longitude));

    rawCoordinates.forEach(function (latLng) {
        heatmapData.push(latLng);
    });

    heatmap = new google.maps.visualization.HeatmapLayer({
        data: heatmapData,
        map: map,
    });
    const gradient = [
        "rgba(0, 255, 255, 0)",
        "rgba(0, 255, 255, 1)",
        "rgba(0, 191, 255, 1)",
        "rgba(0, 127, 255, 1)",
        "rgba(0, 63, 255, 1)",
        "rgba(0, 0, 255, 1)",
        "rgba(0, 0, 223, 1)",
        "rgba(0, 0, 191, 1)",
        "rgba(0, 0, 159, 1)",
        "rgba(0, 0, 127, 1)",
        "rgba(63, 0, 91, 1)",
        "rgba(127, 0, 63, 1)",
        "rgba(191, 0, 31, 1)",
        "rgba(255, 0, 0, 1)",
    ];

    const heatmapRadius = 20;
    heatmap.set('radius', heatmapRadius);
    heatmap.set('gradient', gradient);
    heatmap.set('maxIntensity', 2);
    heatmap.set("opacity", 0.35);

    // 初始化InfoWindow
    const infoWindow = new google.maps.InfoWindow();

    // 监听地图鼠标移动事件
    google.maps.event.addListener(map, 'mousemove', function(event) {
        const mouseLatLng = event.latLng;
        let count = 0;

        // 统计鼠标位置附近的坐标数量
        rawCoordinates.forEach(latLng => {
            const distance = google.maps.geometry.spherical.computeDistanceBetween(mouseLatLng, latLng);
            // 判断是否在热力图半径范围内
            if (distance <= heatmapRadius) {
                count++;
            }
        });

        if (count > 0) {
            infoWindow.setContent(`该区域坐标总数: ${count}`);
            infoWindow.setPosition(mouseLatLng);
            infoWindow.open(map);
        } else {
            infoWindow.close();
        }
    });

    // 鼠标移出地图时关闭提示框
    google.maps.event.addListener(map, 'mouseout', function() {
        infoWindow.close();
    });
}

关键说明 #

• 使用google.maps.geometry.spherical.computeDistanceBetween计算坐标点与鼠标位置的直线距离，确保判断逻辑和热力图的渲染范围一致
• 直接监听地图的mousemove事件，绕过热力图图层无法交互的限制
• 复用热力图的半径参数，保证统计范围和视觉上的热力区域匹配

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