<font size="" color=""><!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="http://api.map.baidu.com/api?v=2.0&ak=你的key"></script>
<script type="text/javascript" src="http://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:500px;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(117.830586, 30.943465);
// 初始化地图,设置中心点坐标和地图级别
map.centerAndZoom(point, 13);
// 允许滚轮缩放
map.enableScrollWheelZoom();
//设置热力图的点参数
var points =[
{"lng":117.862179,"lat":30.940701,"count":50},
{"lng":117.226897,"lat":30.703597,"count":51},
{"lng":117.79901,"lat":30.956806,"count":15},
{"lng":117.899809,"lat":30.917902,"count":40},
{"lng":117.799091,"lat":30.956403,"count":100}];
//判断浏览器是否支持canvas
if(!isSupportCanvas()){alert('热力图目前只支持有canvas支持的浏览器,您所使用的浏览器不能使用热力图功能~')}
//热力图初始化
heatmapOverlay1 = new BMapLib.HeatmapOverlay({"radius":20});
//地图添加热力图层
map.addOverlay(heatmapOverlay1);
//热力图层添加数据
heatmapOverlay1.setDataSet({data:points,max:100});
//不知道作用
//判断浏览区是否支持canvas
function isSupportCanvas(){
var elem = document.createElement('canvas');
return !!(elem.getContext && elem.getContext('2d'));
}
//显示热力图
function openHeatmap(){
heatmapOverlay1.show();
}
//关闭热力图
function closeHeatmap(){
heatmapOverlay1.hide();
}
closeHeatmap();
</script></font>
百度地图实现热力图效果
最新推荐文章于 2023-07-19 14:24:47 发布