【高德LBS开源组件大赛】高德地图热力图

开源组件名称

高德地图热力图

开源组件说明及使用场景

热力图是以特殊高亮的形式显示访客热衷的页面区域和访客所在的地理区域的图示（百度百科）。通过热力图可以分析某个事件的热度，比如景点的人流量等等。

开源组件所使用的技术

基于高德地图JS API V1.3和heatmap.js实现的热力图。

Git代码托管地址

http://git.oschina.net/zjzhome/heatmap-amap.js

效果截图

使用方法

• 先后引入高德地图api和heatmap-amap.js。

<script src="http://webapi.amap.com/maps?v=1.3&key=yourkey"></script>
<script src="heatmap-amap.js"></script>

• 
  

• 初始化高德热力图对象

   /*
    * map：地图对象
    * opts：可选参数，其中
        radius：热力图每个点的半径
        visible：热力图是否显示
        opacity：热力图的透明度，取值范围0~100
        gradient：热力图的渐变区间
    * 可参考heatmap.js的文档：https://github.com/pa7/heatmap.js/blob/master/README.md
    */
    var config =  {
        'radius': 30,
        'visible': true,
        'opacity': 40,
        'gradient': { 0.45: 'rgb(0,0,255)', 0.55: 'rgb(0,255,255)', 0.65: 'rgb(0,255,0)', 0.95: 'yellow', 1.0: 'rgb(255,0,0)' }
    };
    var heatmap = new AMap.Heatmap(map, config);

• 调用start方法

heatmap.start();

• 设置数据。

 var obj = {
        max: 90, //权重最大值        //lng为精度值，lat为纬度值，count为权重        
        data: [
            {lng:114.169922, lat:30.606004, count: 80},
            {lng:114.322357, lat:30.640275, count: 60},
            {lng:114.33197, lat:30.556348, count: 90},
            ...
        ]
    };
    //调用setDataSet()方法即可显示。
    heatmap.setDataSet(obj);

更多请前往项目主页：http://git.oschina.net/zjzhome/heatmap-amap.js