用HeatMap.js实现校园步行热力图绘制——以山东理工大学为例

百度地图和高德地图的JavaScript API都提供了热力图的绘制方法，都是将热力图作为新的图层，叠加到地图上。但是百度地图的经纬度体系与我们的经纬度存在偏差，高德的与我们相符，应当使用高德地图JavaScript API。
一、下载水经注地图软件，拾取山东理工大学特征坐标（比如四个顶点）

东南角:118.004536628723,36.804091930389
西南角：117.986088395119,36.805958747864
西北角：117.987563610077,36.816290616989
东北角：118.005303740501,36.814890503883
校园中心位置（非精确值）:117.995889186859,36.810379028320
二、安装HeatMap.js框架以及高德AMap框架

三、定义heatmap层，并添加到map上

window.onload = function() {
     
    //*************************************************显示地图底图********************************************
    var map = new AMap.Map('container', {
     
        center: [117.995889186859, 36.810379028320],
        resizeEnable: true,
        zoom: 16,
    });
    //**************************************************添加热力图**********************************************
    //设置数据集
    var points = [
        {
      "lat": 36.804091930389, "lng": 118.004536628723, "count": 1 },
        {
      "lat": 36.805958747864, "lng": 117.986088395119, "count": 5 },
        {
      "lat": 36.816290616989, "lng": 117.987563610077, "count": 4 },
        {
      "lat": 36.814890503883, "lng": 118.005303740501, "count": 6 },
        {
      "lat": 36.810379028320, "lng": 117.995889186859, "count": 7 },
    ]
    var heatmap;
    map.plugin(["AMap.Heatmap"], function() {
     
        heatmap = new AMap.Heatmap(map, {
     
            radius: 100,
            opacity: [0, 0.8]
                // gradient: {
     
                //     0.5: 'blue',
                //     0.65: 'rgb(117,211,248)',
                //     0.7: 'rgb(0,255,0)',
                //     0.9: 'ffea00',
                //     1.0: 'red',
                // }
        })
        heatmap.setDataSet({
     
            data: points,
            max: 7
        });
    })

}

四、可以看到水经注所拾取的坐标与高德地图并不完全重合