<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<script type="text/javascript" src="//api.map.baidu.com/api?v=2.0&ak=您的密钥"></script>
<script type="text/javascript" src="//api.map.baidu.com/library/Heatmap/2.0/src/Heatmap_min.js"></script>
<title>热力图功能示例</title>
<style type="text/css">
ul,li{list-style: none;margin:0;padding:0;float:left;}
html{height:100%}
body{height:100%;margin:0px;padding:0px;font-family:"微软雅黑";}
#container{height:800px;width:100%;}
#r-result{width:100%;}
</style>
</head>
<body>
<div id="container"></div>
<div id="r-result">
<input type="button" onclick="openHeatmap();" value="显示热力图"/><input type="button" onclick="closeHeatmap();" value="关闭热力图"/>
</div>
</body>
</html>
<script type="text/javascript">
var map = new BMap.Map("container"); // 创建地图实例
var point = new BMap.Point(104.718261, 31.821984);
map.centerAndZoom(point, 15); // 初始化地图，设置中心点坐标和地图级别
map.enableScrollWheelZoom(); // 允许滚轮缩放
map.addControl(new BMap.MapTypeControl({mapTypes: [BMAP_NORMAL_MAP,BMAP_SATELLITE_MAP ]}));
var points =[
{"lng":104.718261,"lat":31.821984,"count":50},
{"lng":104.723332,"lat":31.816532,"count":51},
{"lng":104.719787,"lat":31.830658,"count":15},
{"lng":104.718455,"lat":31.820921,"count":40},
{"lng":104.718843,"lat":31.815516,"count":100},
{"lng":104.72546,"lat":31.818503,"count":6},
{"lng":104.723289,"lat":31.819989,"count":18},
{"lng":104.718162,"lat":31.815051,"count":80},
{"lng":104.722039,"lat":31.81782,"count":11},
{"lng":104.71387,"lat":31.817253,"count":7},
{"lng":104.71773,"lat":31.819426,"count":42},
{"lng":104.721107,"lat":31.816445,"count":4},
{"lng":104.717521,"lat":31.817943,"count":27},
{"lng":104.719812,"lat":31.820836,"count":23},
{"lng":104.720682,"lat":31.81463,"count":60},
{"lng":104.715424,"lat":31.824675,"count":8},
{"lng":104.719242,"lat":31.814509,"count":15},
{"lng":104.722766,"lat":31.821408,"count":25},
{"lng":104.721674,"lat":31.824396,"count":21},
{"lng":104.727268,"lat":31.82267,"count":1},
{"lng":104.717721,"lat":31.820034,"count":51},
{"lng":104.712456,"lat":31.82667,"count":7},
{"lng":104.720432,"lat":31.819114,"count":11},
{"lng":104.725013,"lat":31.821611,"count":35},
{"lng":104.718733,"lat":31.831037,"count":22},
{"lng":104.719336,"lat":31.831134,"count":4},
{"lng":104.713557,"lat":31.823254,"count":5},
{"lng":104.718367,"lat":31.82943,"count":3},
{"lng":104.724312,"lat":31.819621,"count":100},
{"lng":104.723874,"lat":31.819447,"count":87},
{"lng":104.724225,"lat":31.823091,"count":32},
{"lng":104.717801,"lat":31.821854,"count":44},
{"lng":104.717129,"lat":31.828227,"count":21},
{"lng":104.726426,"lat":31.822286,"count":80},
{"lng":104.721597,"lat":31.81948,"count":32},
{"lng":104.723895,"lat":31.820787,"count":26},
{"lng":104.723563,"lat":31.821197,"count":17},
{"lng":104.717982,"lat":31.822547,"count":17},
{"lng":104.726126,"lat":31.821938,"count":25},
{"lng":104.72326,"lat":31.815782,"count":100},
{"lng":104.719239,"lat":31.816759,"count":39},
{"lng":104.717185,"lat":31.829123,"count":11},
{"lng":104.717237,"lat":31.827518,"count":9},
{"lng":104.717784,"lat":31.815754,"count":47},
{"lng":104.720193,"lat":31.817061,"count":52},
{"lng":104.722735,"lat":31.815619,"count":100},
{"lng":104.718495,"lat":31.815958,"count":46},
{"lng":104.716292,"lat":31.831166,"count":9},
{"lng":104.719916,"lat":31.824055,"count":8},
{"lng":104.72189,"lat":31.821308,"count":11},
{"lng":104.713765,"lat":31.829376,"count":3},
{"lng":104.718232,"lat":31.820348,"count":50},
{"lng":104.717554,"lat":31.830511,"count":15},
{"lng":104.718568,"lat":31.818161,"count":23},
{"lng":104.713461,"lat":31.826306,"count":3},
{"lng":104.72232,"lat":31.82161,"count":13},
{"lng":104.7174,"lat":31.828616,"count":6},
{"lng":104.724679,"lat":31.815499,"count":21},
{"lng":104.72171,"lat":31.815738,"count":29},
{"lng":104.717836,"lat":31.816998,"count":99},
{"lng":104.720755,"lat":31.828001,"count":10},
{"lng":104.714077,"lat":31.830655,"count":14},
{"lng":104.726092,"lat":31.822995,"count":16},
{"lng":104.71535,"lat":31.831054,"count":15},
{"lng":104.713022,"lat":31.821895,"count":13},
{"lng":104.715551,"lat":31.813373,"count":17},
{"lng":104.721191,"lat":31.826572,"count":1},
{"lng":104.719612,"lat":31.817119,"count":9},
{"lng":104.718237,"lat":31.821337,"count":54},
{"lng":104.723776,"lat":31.821919,"count":26},
{"lng":104.717694,"lat":31.82536,"count":17},
{"lng":104.715377,"lat":31.814137,"count":19},
{"lng":104.717434,"lat":31.814394,"count":43},
{"lng":104.72588,"lat":31.822622,"count":27},
{"lng":104.718345,"lat":31.819467,"count":8},
{"lng":104.726883,"lat":31.817171,"count":3},
{"lng":104.723877,"lat":31.816659,"count":34},
{"lng":104.715712,"lat":31.815613,"count":14},
{"lng":104.719869,"lat":31.831416,"count":12},
{"lng":104.716956,"lat":31.825377,"count":11},
{"lng":104.72066,"lat":31.825017,"count":38},
{"lng":104.716244,"lat":31.820215,"count":91},
{"lng":104.71929,"lat":31.815908,"count":54},
{"lng":104.722116,"lat":31.819658,"count":21},
{"lng":104.7183,"lat":31.825015,"count":15},
{"lng":104.721969,"lat":31.813527,"count":3},
{"lng":104.722936,"lat":31.821854,"count":24},
{"lng":104.71905,"lat":31.829217,"count":12},
{"lng":104.724579,"lat":31.814987,"count":57},
{"lng":104.72076,"lat":31.815251,"count":70},
{"lng":104.725867,"lat":31.818989,"count":8}];
if(!isSupportCanvas()){
alert('热力图目前只支持有canvas支持的浏览器,您所使用的浏览器不能使用热力图功能~')
}
heatmapOverlay = new BMapLib.HeatmapOverlay({"radius":40});
map.addOverlay(heatmapOverlay);
heatmapOverlay.setDataSet({data:points,max:100});
//是否显示热力图
function openHeatmap(){
heatmapOverlay.show();
}
function closeHeatmap(){
heatmapOverlay.hide();
}
closeHeatmap();
function setGradient(){
/*格式如下所示:
{
0:'rgb(102, 255, 0)',
.5:'rgb(255, 170, 0)',
1:'rgb(255, 0, 0)'
}*/
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});
}
//判断浏览区是否支持canvas
function isSupportCanvas(){
var elem = document.createElement('canvas');
return !!(elem.getContext && elem.getContext('2d'));
}
</script>