用百度地图API做热力图

吐槽一下，以前申请的ak居然没有权限用js api，神一样的逻辑

然后新开的，居然有十五分钟以上的延迟。搞到我查了一阵，准备去论坛发帖了，突然好了。。。

然后设置渐变颜色很蛋疼，直男的审美有点痛苦

最后zoom out拉大到一定程度，就傻逼了，一堆点挤在一条线上，在论坛发个帖问了。坐等回复。

基本就是这样的一个script了

var map = new BMap.Map("container");

var point = new BMap.Point(116.418261, 39.921984);

map.centerAndZoom(point, 8);

map.enableScrollWheelZoom();

var points = {{geo_infos|tojson}};

if(!isSupportCanvas()){

alert('browser not support canvas')

}

var gradient = {0.1:'rgb(65, 105, 225)',0.3:'rgb(0, 0, 205)',0.5:'rgb(70, 130, 180)',0.7:'rgb(255, 215, 0)',0.9:'rgb(255, 0, 0)'};

heatmapOverlay = new BMapLib.HeatmapOverlay({"radius":5, "visible":true, "gradient":gradient, "opacity":50});

map.addOverlay(heatmapOverlay);

heatmapOverlay.setDataSet({data:points,max:100});

heatmapOverlay.show();

function openHeatmap(){

heatmapOverlay.show();

}

function closeHeatmap(){

heatmapOverlay.hide();

}

openHeatmap();

function setGradient(){

var gradient = {};

var colors = document.querySelectorAll("input[type='color']");

colors = [].slice.call(colors,0);

colors.forEach(function(ele){

gradient[ele.getAttribute("data-key")] = ele.value;

});

heatmapOverlay.setOptions({"gradient":gradient});

}

function isSupportCanvas(){

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

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

}