宝塔服务器面板，一键全能部署及管理，送你10850元礼包，点我领取
一、热力图介绍
百度地图热力图是在地图上通过颜色的渐变来表达不同区域数量/密度的分布，通常用于表达POI（Point of Interest）在特定区域内的分布情况。颜色越深表示分布的密度越大，颜色越浅表示分布的密度越小。在地图上，这些区域用热力图层表示。
对于地图的交互性，百度地图热力图提供了各种事件触发与回调，以满足用户需要进行更细致的处理，比如当鼠标经过或点击热力图时，可以返回所在区域的相关信息。
二、使用方法
使用百度地图热力图需要引入相应的JavaScript文件：
http://api.map.baidu.com/api?v=2.0&ak=[您的AK密钥]&callback=init
其中“v=2.0”表示引用百度地图API 指定版本；“ak=[您的AK密钥]”表示需要您在百度地图开放平台上注册获取并指定；“callback=init”表示需要执行的初始化函数，您可以自定义函数名，也可以保持默认。
接下来就可以像创建普通百度地图一样来创建热力图层了。
var map = new BMap.Map("myMap");
map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);
var heatmapOverlay = new BMapLib.HeatmapOverlay({"radius":20});
map.addOverlay(heatmapOverlay);
上面的代码创建了一个宽高为800px * 600px，中心点位于（116.404, 39.915）、缩放级别为11的地图，并添加了一个半径为20的热力图层。
三、自定义样式
百度地图热力图提供了丰富的自定义样式选项，可以通过以下代码设置热力图层的样式：
var heatmapOverlay = new BMapLib.HeatmapOverlay({
"radius":20,
"gradient":{.5:"#5cffff",.8:"#5bff6c",1:"#ff5c5c"},
"opacity":1,
"max":100
});
其中，“radius”表示半径大小；“gradient”表示颜色渐变，可自定义多种颜色；“opacity”表示热力图层的透明度；“max”表示热力值的最大显示值。
四、事件与回调
我们可以对热力图层添加各种事件，以满足用户对地图的更精细化处理。
var heatmapOverlay = new BMapLib.HeatmapOverlay({"radius":20});
heatmapOverlay.addEventListener("mouseout", function(){
console.log("取消选择");
});
heatmapOverlay.addEventListener("mousemove", function(e){
console.log("鼠标移动到：" + e.point.lng + ", " + e.point.lat);
});
heatmapOverlay.addEventListener("click", function(e){
console.log("点击：" + e.point.lng + ", " + e.point.lat);
});
上面的代码定义了三个事件，分别是鼠标移开、移动和点击。当我们在热力图层上执行相应操作时，就会触发相应的事件，以便进行用户交互与信息处理。
五、使用示例
下面我们提供一个百度地图热力图的完整使用示例：（请将“[您的AK密钥]”替换为真实的AK密钥）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>百度地图热力图</title>
<script src="http://api.map.baidu.com/api?v=2.0&ak=[您的AK密钥]&callback=init"></script>
<script>
function init(){
var map = new BMap.Map("myMap");
map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);
var points = [{"lng":116.418261,"lat":39.921984,"count":50},{"lng":116.423332,"lat":39.916532,"count":20},{"lng":116.419787,"lat":39.930658,"count":30},{"lng":116.418455,"lat":39.920921,"count":40},{"lng":116.418843,"lat":39.915516,"count":100},{"lng":116.42546,"lat":39.918503,"count":6},{"lng":116.423289,"lat":39.919989,"count":18},{"lng":116.418162,"lat":39.915051,"count":80},{"lng":116.422039,"lat":39.91782,"count":11},{"lng":116.41387,"lat":39.917253,"count":7},{"lng":116.415424,"lat":39.923176,"count":42},{"lng":116.421597,"lat":39.91948,"count":4},{"lng":116.423895,"lat":39.920787,"count":27},{"lng":116.431907,"lat":39.914987,"count":3},{"lng":116.418392,"lat":39.920431,"count":23},{"lng":116.4192,"lat":39.917655,"count":60}];
var heatmapOverlay = new BMapLib.HeatmapOverlay({
"radius":20,
"gradient":{.5:"#5cffff",.8:"#5bff6c",1:"#ff5c5c"},
"opacity":1,
"max":100
});
map.addOverlay(heatmapOverlay);
heatmapOverlay.setDataSet({data:points,max:100});
heatmapOverlay.addEventListener("mouseout", function(){
console.log("取消选择");
});
heatmapOverlay.addEventListener("mousemove", function(e){
console.log("鼠标移动到：" + e.point.lng + ", " + e.point.lat);
});
heatmapOverlay.addEventListener("click", function(e){
console.log("点击：" + e.point.lng + ", " + e.point.lat);
});
}
</script>
</head>
<body>
<div id="myMap" style="width:800px;height:600px;"></div>
</body>
</html>
这个示例使用了一个封装好的数据集“points”（包含每个点的经度、纬度及权重值），以展示如何在百度地图上创建热力图，并添加相应的事件。您可以将示例代码直接复制到您的编辑器中，修改AK密钥并保存为.html文件即可运行。
支付宝扫一扫
微信扫一扫
最新评论