为热力图上的点添加事件
程序员文章站
2022-10-05 08:39:55
1. 用到的工具 百度地图API (web开发 javascript ) 2. 需求 给热力图上的点添加点击事件 3. 遇到的问题 原始的热力图上的点不能点击 4. 解决方法 首先绘制热力图,HTML代码如下: JavaScript代码如下: 解释: heatmapOverlay.setDataSe ......
1. 用到的工具
百度地图api (web开发 javascript )
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数组,添加覆盖物信息,将这些点标注在地图上。
但是这样做会有一个问题,这些标注会遮盖我们的热点图上的点。
我的解决方案是:给这些点设置新的图标,使用透明的图片代替原始的图标
//给热力图添加点击事件 function addheatmapclick(points){ //var pointarray = new array(); for(var i=0;i<points.length;i++) { var hotpoint = new bmap.point(points[i].lng, points[i].lat); //console.log("points.lng:" + points[i].lng + " points.lat:" + points[i].lat); console.log("hotpoint:" + hotpoint.lng,hotpoint.lat); var myicon = new bmap.icon("../pic/hmc.png", new bmap.size(20,20), { //自定义覆盖物 anchor: new bmap.size(12, 14), //中心点设置 }); var cmarker = new bmap.marker(hotpoint,{icon:myicon}); // 创建标注 map.addoverlay(cmarker); // 将标注添加到地图中 //pointarray[i] = new bmap.point(points[i][0], points[i][1]); cmarker.addeventlistener("click",getattr); } //让所有点在视野范围内 //map.setviewport(pointarray); function getattr(e){ var p = e.target; console.log("marker的位置是" + p.getposition().lng + "," + p.getposition().lat); var point = new bmap.point(p.getposition().lng, p.getposition().lat); searchinfowindow.open(point); } }
注:原文参考:
上一篇: 适配器模式(2)
推荐阅读
-
为热力图上的点添加事件
-
jquery无法为动态生成的元素添加点击事件的解决方法(推荐)
-
由JS for 循环中为元素添加点击事件到JS 中的事件委托
-
为Typora添加从一个文档跳到另一个文档的功能,并且自带锚点
-
为wpf中的DataGrid控件添加鼠标单击事件
-
为非IE浏览器添加mouseenter,mouseleave事件的实现代码_javascript技巧
-
为非IE浏览器添加mouseenter,mouseleave事件的实现代码_javascript技巧
-
为热力图上的点添加事件
-
jQuery为iframe的body添加click事件的实现代码_jquery
-
JS为动态创建的元素添加事件