热力地图高德_调用高德地图API（热力图）详解

具体脚本语言如下：

热力图

var map = new AMap.Map("container", {

resizeEnable: true,

center: [116.418261, 39.921984],

zoom: 11

});

var points=[

{"lng":"116.32497","lat":"39.96696"},

{"lng":"116.616","lat":"40.053016"},

{"lng":"116.34324","lat":"39.95056"},

{"lng":"116.554131","lat":"39.912131"},

{"lng":"116.3483","lat":"39.83151"},

{"lng":"116.36619","lat":"39.75298"}

];

if (!isSupportCanvas()) {

alert('热力图仅对支持canvas的浏览器适用,您所使用的浏览器不能使用热力图功能,请换个浏览器试试~')

}

//详细的参数,可以查看heatmap.js的文档 http://www.patrick-wied.at/static/heatmapjs/docs.html

//参数说明如下:

/* visible 热力图是否显示,默认为true

* opacity 热力图的透明度,分别对应heatmap.js的minOpacity和maxOpacity

* radius 势力图的每个点的半径大小

* gradient {JSON} 热力图的渐变区间 . gradient如下所示

*{

.2:'rgb(0, 255, 255)',

.5:'rgb(0, 110, 255)',

.8:'rgb(100, 0, 255)'

}

其中 key 表示插值的位置, 0-1

value 为颜色值

*/

var heatmap;

map.plugin(["AMap.Heatmap"], function() {

//初始化heatmap对象

heatmap = new AMap.Heatmap(map, {

radius: 25, //给定半径

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: 100

});

});

//判断浏览区是否支持canvas

function isSupportCanvas() {

var elem = document.createElement('canvas');

return !!(elem.getContext && elem.getContext('2d'));

}

大家将上述代码存在一个html文件中，然后通过网页打开即可。

其中只需要注意

heatmap.setDataSet({

data: points,

max: 1

}

中的data：后面的points是你自己的数据，即在之前定义的json格式经纬度

var points=[

{"lng":"116.32497","lat":"39.96696"},

{"lng":"116.616","lat":"40.053016"},

{"lng":"116.34324","lat":"39.95056"},

{"lng":"116.554131","lat":"39.912131"},

{"lng":"116.3483","lat":"39.83151"},

{"lng":"116.36619","lat":"39.75298"}

];

还有就是max的值(即最红区域对应的次数值)选取自己觉得合适的，不然太小会几乎一片红色，太大几乎看不到热力图颜色。