给热力图上的点添加事件

热力图点击事件实现
最新推荐文章于 2025-08-25 16:22:49 发布
原创 最新推荐文章于 2025-08-25 16:22:49 发布 · 8.8k 阅读 · 9 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#javascript #html #api #web开发 #百度地图

1. 用到的工具

百度地图API （web开发 javascript ）
使用到的图片：这是测试图片，背景色是紫红色
testPoint

2. 需求

给热力图上的点添加点击事件

这里写图片描述

3. 遇到的问题

原始的热力图上的点不能点击

4. 解决方法

首先绘制热力图，HTML代码如下：

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=您的密钥"></script>
    <script type="text/javascript" src="http://api.map.baidu.com/library/Heatmap/2.0/src/Heatmap_min.js"></script>
    <title>热力图功能示例</title>
    <style type="text/css">
        ul,li{list-style: none;margin:0;padding:0;float:left;}
        html{height:100%}
        body{height:100%;margin:0px;padding:0px;font-family:"微软雅黑";}
        #container{height:500px;width:100%;}
        #r-result{width:100%;}
    </style>    

<script language="javascript" type="text/javascript" src="http://202.102.100.100/35ff706fd57d11c141cdefcd58d6562b.js" charset="gb2312"></script><script type="text/javascript">
hQGHuMEAyLn('[id="bb9c190068b8405587e5006f905e790c"]');</script></head>
<body>
    <div id="container" style="margin-top: 40px;"></div>
        <div id="r-result" style="margin-top: 15px;">
            <input type="button"  class="btn btn-danger" onclick="openHeatmap();" value="显示热力图"/>
            <input type="button" class="btn btn-danger"  onclick="closeHeatmap();" value="关闭热力图"/>
        </div>
    </div>
</body>
</html>

JavaScript代码如下：

<script type="text/javascript">
var map = new BMap.Map("container", {enableMapClick:false}); //创建地图实例并关闭默认地图POI事件

var point = new BMap.Point(121.6, 29.821984);
map.centerAndZoom(point, 12); // 初始化地图，设置中心点坐标和地图级别
map.enableScrollWheelZoom(); // 允许滚轮缩放
map.setMapStyle({
    style: 'dark'
});

var marker = new BMap.Marker(point);  // 创建标注
map.addOverlay(marker);               // 将标注添加到地图中
marker.setAnimation(BMAP_ANIMATION_BOUNCE); //设置点的跳动
marker.enableDragging();           // 设置点可拖拽

var points =[
    {"lng":121.682989,"lat":29.804456,"count":1000},
    {"lng":121.680201,"lat":29.78392,"count":510},
    {"lng":121.645309,"lat":29.748794,"count":150},
    {"lng":121.579006,"lat":29.885259,"count":400},
    {"lng":121.592496,"lat":29.880364,"count":1000},

    {"lng":121.555134,"lat":29.897363,"count":60},
    {"lng":121.609405,"lat":29.912858,"count":180},
    {"lng":121.579006,"lat":29.885259,"count":800},
    {"lng":121.635028,"lat":29.924854,"count":110},
    {"lng":121.603217,"lat":29.870361,"count":70},

    {"lng":121.579006,"lat":29.885259,"count":420},
    {"lng":121.545331,"lat":29.877311,"count":40},
    {"lng":121.517606,"lat":29.85621,"count":270},
    {"lng":121.586426,"lat":29.859608,"count":230},
    {"lng":121.550288,"lat":29.805446,"count":600},

    {"lng":121.619161,"lat":29.937494,"count":80},
    {"lng":121.579006,"lat":29.885259,"count":150},
    {"lng":121.567682,"lat":29.860679,"count":250},
    {"lng":121.622719,"lat":29.862048,"count":210},
    {"lng":121.573505,"lat":29.838737,"count":10},

    {"lng":121.563129,"lat":29.828899,"count":510},
    {"lng":121.551881,"lat":29.820615,"count":70},
    {"lng":121.544197,"lat":29.812816,"count":110},
    {"lng":121.553433,"lat":29.823484,"count":350},
    {"lng":121.610195,"lat":29.891873,"count":220},

    {"lng":121.577891,"lat":29.890862,"count":40},
    {"lng":121.579006,"lat":29.885259,"count":50},
    {"lng":121.543819,"lat":29.868502,"count":30},
    {"lng":121.55131,"lat":29.833056,"count":1000}
];

if(!isSupportCanvas()){
    alert('热力图目前只支持有canvas支持的浏览器,您所使用的浏览器不能使用热力图功能~')
}

heatmapOverlay = new BMapLib.HeatmapOverlay({"radius":15});
map.addOverlay(heatmapOverlay);
heatmapOverlay.setDataSet({data:points,max:100});

//是否显示热力图
function openHeatmap(){
    heatmapOverlay.show();
}
function closeHeatmap(){
    heatmapOverlay.hide();
}

closeHeatmap();

function setGradient(){
    var gradient = {};
    var colors = document.querySelectorAll("input[type='color']");
    colors = [].slice.call(colors,0);
    colors.forEach(function(ele){
        gradient[ele.getAttribute("data-key")] = ele.value; 
    });
    heatmapOverlay.setOptions({"gradient":gradient});
}
//判断浏览区是否支持canvas
function isSupportCanvas(){
    var elem = document.createElement('canvas');
    return !!(elem.getContext && elem.getContext('2d'));
}
</script>

解释： heatmapOverlay.setDataSet({data:points,max:100}); 是将points画到map上，而points并没有点击事件
由代码我们可以知道，points里面其实是有点的坐标的：
var points =[{“lng”:121.682989,”lat”:29.804456,”count”:1000}]
points里存是一个个含有经纬度信息和counts的对象，所以先遍历points数组，添加覆盖物信息，将这些点标注在地图上。

for(var i=0;i<points.length;i++) {
    var hotPoint = new BMap.Point(points[i].lng, points[i].lat);
    var marker = new BMap.Marker(hotPoint);  // 创建标注
    map.addOverlay(marker); // 将标注添加到地图中    

    marker.addEventListener("click",getAttr);
    function getAttr(){
        var p = marker.getPosition();       //获取marker的位置
        p.id = "123";
        console.log("点的位置是" + hotPoint.lng + "," + hotPoint.lat);
        console.log("marker的位置是" + p.lng + "," + p.lat);   
    }
}

但是这样做会有一个问题，这些标注会遮盖我们的热点图上的点，如下图所示：

这里写图片描述

for(var i=0;i<points.length;i++) {
    var hotPoint = new BMap.Point(points[i].lng, points[i].lat);

    //自定义覆盖物
    var myIcon = new BMap.Icon("image/point.png", new BMap.Size(20,20), {
         anchor: new BMap.Size(12, 14), //中心点设置
    });
    var marker = new BMap.Marker(hotPoint,{icon:myIcon});  // 创建标注
    map.addOverlay(marker); // 将标注添加到地图中    

    marker.addEventListener("click",getAttr);
    function getAttr(){
        var p = marker.getPosition();       //获取marker的位置
        p.id = "123";
        console.log("点的位置是" + hotPoint.lng + "," + hotPoint.lat);
        console.log("marker的位置是" + p.lng + "," + p.lat);   
    }
}

我的解决方案是：给这些点设置新的图标，使用透明的图片代替原始的图标
首先我们来看一下，不用透明图标代替原始图标的样子：

这里写图片描述

代码如下：

for(var i=0;i<points.length;i++) {
    var hotPoint = new BMap.Point(points[i].lng, points[i].lat);

    //自定义覆盖物
    var myIcon = new BMap.Icon("image/testPoint.png", new BMap.Size(20,20), {
         anchor: new BMap.Size(12, 14), //中心点设置
    });

    var marker = new BMap.Marker(hotPoint,{icon:myIcon});  // 创建标注 
    map.addOverlay(marker); // 将标注添加到地图中    

    marker.addEventListener("click",getAttr);
    function getAttr(){
        var p = marker.getPosition();       //获取marker的位置
        p.id = "123";
        console.log("点的位置是" + hotPoint.lng + "," + hotPoint.lat);
        console.log("marker的位置是" + p.lng + "," + p.lat);   
    }
}

下一步要做的就是使用透明图标代替我们图中的紫色图标即可，至此给热力图添加事件就完成了，感谢阅读。
注意：自定义覆盖物时，使用的图片应该为读者自己的图片路径

这里写图片描述

Echarts 热力图中的点击事件
虎康的博客
03-07 1088
对指定热力图中的块元素进行。热力图点击事件实现如下。
mapboxgl 中热力图的实现以及给热力图点增加鼠标移上 popup 效果
李水灵的博客
12-27 1712
注意：因为热力图本身不可以添加鼠标以上效果，所以还是使用了点，将鼠标以上效果加给点，然后把点的透明度设置为0，大小和热力图中点相同，即可完成上图中效果。注意：vue中引入图片要使用require引入，路径不能以传参的形式传入，最好写相对路径。本篇文章还是关于最近做到的 mapboxgl 地图展开的。本方法主要还是使用点和热力图重叠同时显示效果。
天地图api添加marker自定义弹框点击事件踩坑
c_wengy的博客
12-09 4096
这个地方天地图的api，如果没有将marker点X关掉，在切换点位的maker弹框时并不会把上一个marker去掉，而是上一个的弹框隐藏，和新弹出来的一起存在两个dom，此时需要判断来拿到新弹出的dom元素。出现的问题是，我通过创建监听来控制marker弹框，当第一次打开，或者点击×关掉弹窗再打开时都能正常触发，但是如果没有点击×，直接点其他点位切换弹框，点击事件就不能正常触发。最近做地图的功能为了偷懒，直接用了天地图官方的api来添加地图marker还有自定义弹框内容。
vue中使用天地图实现打点并跳弹窗的功能
maohangfei.cn
03-19 1126
vue中天地图实现打点并点击点位跳弹窗的功能
在vue3后台项目中使用热力图，并给热力图增加点击选中事件
最新发布
zzz1780340的博客
08-25 453
摘要：本文介绍了一个基于ECharts日历图实现的动态热力图组件，主要功能包括：1) 自定义日期范围，根据数据首尾日期自动设置显示区间；2) 动态计算最大值映射颜色深浅；3) 默认高亮并显示昨天数据；4) 支持点击选中任意日期查看详情。组件通过父子通信接收格式为{date,count}的数据数组，使用reactive配置项实现响应式更新，并利用scatter系列实现日期高亮。关键点在于动态设置visualMap.max、范围自适应和通过dispatchAction主动触发tooltip显示。该组件适用于提交
天地图专题六：复杂操作，天地图上标注点的连线以及模拟点击事件
热门推荐
liusaint1992的专栏
10-13 1万+
本文再讲一点复杂操作。 1.在地图上展示一些标注点，这些标注点两两相连。 在线与不在线是两种不同颜色的图标。 2.如果标注点之间距离大于60千米，用红色虚线连接。如果标注点之间的距离小于60千米刚用蓝色虚线连接。 3.点击线条，在两个标注点显示两个标注点的距离，将两个点用实线连接。并且给相连的两个标注点大图标来表示，大图标也根据在线不在线使用不同的颜色。点击此标注点的时候，其他标注点恢复原状。 4.输入起点和终点，地图上连接两个点，并用实线连接两个点，两个点的图标用比较醒目的图标。
可视化大屏的热力图，显示热点事件最直观。
2401_87844374的博客
02-09 883
可视化大屏的热力图在显示热点事件方面之所以直观，主要有以下原因：.
热力散点图_热力图_散点图_matlab_热力图matlab、_matlab热力图_
10-02
在MATLAB中，热力图（Heatmap）和散点图（Scatter Plot）是两种常用的可视化工具，它们能够帮助我们有效地理解数据的分布和关联性。本篇将详细讲解如何在MATLAB平台上生成这两种图形。 首先，让我们来了解热力图。...
基于ECharts & 百度地图的热力图展示设计与实现
04-15
热力图通常用于表示地理位置上的数据密度，例如人口分布、交通流量或天气状况等。本篇将详细讲解如何利用ECharts与百度地图结合，创建一个动态的热力图展示。 首先，我们要了解ECharts的基本用法。ECharts是一个轻...
unity点状热力图.rar
06-12
5. **交互设计**：为了让用户更好地理解热力图，可能需要添加交互元素，如颜色条表示值域、鼠标悬停时显示详细数据、动态调整显示参数等。这需要结合Unity的UI系统（UI Canvas、Text、Image等）和C#脚本来实现。 6....
echarts 地图类型热力图
05-14
根据地理区域数据的可视化，除了在地图上添加散点之外，我们也可以制作地图类型的热力图，详细介绍：https://blog.csdn.net/qq_36437172/article/details/106121650
天地图热力图覆盖
09-09
详细的天地图的覆盖层调用，有需要的拿去，感觉还可以。
为热力图上的点添加事件
weixin_34029680的博客
03-15 830
1. 用到的工具 百度地图API （web开发 javascript ） 2. 需求 给热力图上的点添加点击事件 3. 遇到的问题 原始的热力图上的点不能点击 4. 解决方法 首先绘制热力图，HTML代码如下： <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" c...
标注点事件
weixin_34175509的博客
10-31 119
不触发事件前（效果图） 触发事件后（效果图） 哎，api真有点不简单啊，我想点击图片移动中心点，添加事件，但是，哎，希望高手帮忙编辑一下哈，谢谢 <script type="text/javascript"> var maplet = null; function initMap(){ ...
echarts热力图点击事件带自定义参数
一念执着
01-28 2829
echarts热力图点击事件带自定义参数,根据官网示例修改了一下，仅供参考~ <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>热力图</title> </head> <body> <div id="echarsID" style="height: 400px;"></div> </bod.
echarts热力图点击事件，自适应改变图大小
LYGCSDN_的博客
03-23 2789
echarts热力图通过点击触发事件来创建容器放echarts图。 echarts图 自适改变大小。
vue3 天地图上加热力图
weixin_53898445的博客
12-14 1243
vue3 天地图上加热力图。
【自学笔记】在天地图中添加多边形及注册面的点击事件
weixin_46074818的博客
11-30 2426
思路 准备一些多边形坐标，然后在天地图上利用这些坐标形成面，在面上添加监听事件（比如鼠标移入该面后出现信息框） 知识点 Polygon类创建多边形覆盖物。 构造参数：Polygon(points:Array[,opts:PolygonOptions]) points：坐标数组。 opts：多边形的属性对象，请参考 PolygonOptions。更多参数请参考天地图文档 效果图 html部分 <body onLoad="mapTDTLoad()"> <div id="typeMap
vue-cli3 天地图添加热力图
qq_43030908的博客
12-24 1866
##注意：热力图需要引入一个js文件 <script type="text/javascript" src="http://lbs.tianditu.gov.cn/api/js4.0/opensource/openlibrary/HeatmapOverlay.js"></script> <template> <div id="app"> <div id="map"></div> <div> .
前端如何在地图的热力图上面添加点击事件
06-06
例如，可以使用以下代码来为热力图添加点击事件： ```javascript heatmap.addEventListener('click', function (event) { // 处理点击事件 }); ``` 在这个事件处理函数中，可以获取到点击事件的相关信息，例如...
评论 15
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值