在地图上绘制热力图的方法

                                                        在地图上绘制热力图的方法   

                                                                                      杨美红   

由于业务需求，要在地图上用热力图的方法展示人群活动的热点地区。经搜索，发现百度地图和高德地图的JavaScript API都提供了热力图的绘制方法，都是将热力图作为新的图层，叠加到地图上。但是百度地图的经纬度体系与我们的经纬度存在偏差，高德的与我们相符，应当使用高德地图JavaScript API。以下是两个API经纬度定位的对比，以亚信大厦为例。

我们经纬度数据在高德上的展示，能够准确定位到亚信大厦。

百度的定位有所偏差。

 

因为是JavaScript API，所以地图展示是在网页上的。以高德地图的API使用为例：

在html文件中添加高德地图必须的script，其中第一行的key可以在高德官网免费申请。

在页面的body标签下添加一个div标签用来承载地图：

在页面的script部分，声明一个map对象，其位置是上一步添加的id为“container”的div，并设置属性resizeEnable（是否监控地图容器尺寸变化，还没搞懂意义），center（开启地图时的中心点，现在就是天安门），zoom（地图的缩放等级）。

定义points列表，也可以是一个json文件，里面每一条数据的key分别为lat（纬度）、lng（经度）、count（对应经纬度出现的次数）

定义heatmap层，并添加到map上，其中radius是热力图的半径，opacity是透明度，gradient是热力图颜色的渐变区间（一直使用默认就行吧，没尝试改变过）。通过heatmap.setDateset设置heatmap的数据集，指定数据为points，并把max设置为5。

这里max的值决定了各经纬度的热度，若max取值太大，则每个点都为“较冷”的点，取值太小，每个点都“热”，所以max 的取值应该根据实际数据进行判断。

Max值取100：

 

同样的数据下，Max值取5：

附 html 源码：