为热力图上的点添加事件-白红宇

为热力图上的点添加事件

阅读量：6928 次

发布时间：2019-06-27

本文共 1965 字，大约阅读时间需要 6 分钟。

1. 用到的工具

百度地图API （web开发 javascript ）

2. 需求

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

3. 遇到的问题

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

4. 解决方法

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

   
      
        热力图功能示例

JavaScript代码如下：

解释： 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

加：

1、点击事件所使用的信息提示窗口

//给标记添加点击事件以及显示窗口信息 var infoWindow = new BMap.InfoWindow('
     
      ' +'
      '                     +'标题：' + 变量1                    +'
      
xxx：'+  变量2                    +'
      
xxx：'+  变量3                    +'
      
xxx：'+ 变量4 + '
     
'); Marker.infoWindow=infoWindow;//给当前标注新增一个属性以便保存窗口信息infoWindowMarker.addEventListener("click", function (e) {            　　 this.openInfoWindow(e.target.infoWindow);//点击标注时，打开改标注对打开改标注对应的回调信息   　　　　　　  　　　　 　　 //如果使用下面的方式，那样就会导致每次标注点击后，弹出的窗口信息都是最后一次循环的infoWindow。因为在click的时候只会去找infoWindow这个变量值，而你的click肯定是在所有循环的，标注都产生完之后，此时infoWindow变量已经被赋值成了最后一次循环的值。　　　　　　　　 //this.openInfoWindow(infoWindow);            });

如果使用searchInfoWindow会出现只在一个位置显示提示信息窗口

Marker.addEventListener("click",function(e){     var Content = '
     
      ' +'
      '                     +'标题：' + 变量1                    +'
      
xxx：'+  变量2                    +'
      
xxx：'+  变量3                    +'
      
xxx：'+ 变量4 + '
     
'; //创建检索信息窗口对象 var searchInfoWindow = null; 　　 　 searchInfoWindow = new BMapLib.SearchInfoWindow(map, Content, { 　　　　title : Title, //标题 　　　　width : 500, //宽度 　　　　height : 105, //高度 　　　　enableSendToPhone : false, //是否使用发送手机 　　　　panel : "panel", //检索结果面板 　　　　enableAutoPan : true, //自动平移 　　　　searchTypes :[]  }); 　　　　searchInfoWindow.open(Marker); });