文档章节

百度API---热力图

a
 a289237642
发布于 2016/10/28 18:14
字数 497
阅读 59
收藏 0

<!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=1.4"></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(108.960637, 34.355135);
map.centerAndZoom(point, 6); // 初始化地图,设置中心点坐标和地图级别
map.enableScrollWheelZoom(); // 允许滚轮缩放
var points = [
{ "lng": 108.960637, "lat": 34.355135, "count": 100 },//西安
{ "lng": 107.203695, "lat": 34.416147, "count": 100 },//宝鸡
{ "lng": 109.080219, "lat": 32.768743, "count": 100 },//安康
{ "lng": 107.019722, "lat": 33.07907, "count": 100},//汉中 
{ "lng": 109.889701, "lat": 33.942135, "count": 100 },//商洛 
{ "lng": 109.448165, "lat": 36.61208, "count": 100 },//延安 
{ "lng": 108.933041, "lat": 34.940506, "count": 100 },//铜川 
{ "lng": 109.515431, "lat": 34.506629, "count": 100 },//渭南 
{ "lng": 108.704512, "lat": 34.339637, "count": 100},//咸阳 
{ "lng": 109.730161, "lat": 38.305673, "count": 100 },// 榆林 
];
if (!isSupportCanvas()) {
alert('热力图目前只支持有canvas支持的浏览器,您所使用的浏览器不能使用热力图功能~')
}
//详细的参数,可以查看heatmap.js的文档 https://github.com/pa7/heatmap.js/blob/master/README.md
//参数说明如下:
/* visible 热力图是否显示,默认为true
* opacity 热力的透明度,1-100
* radius 势力图的每个点的半径大小 
* gradient {JSON} 热力图的渐变区间 . gradient如下所示
* {
.2:'rgb(0, 255, 255)',
.5:'rgb(0, 110, 255)',
.8:'rgb(100, 0, 255)'
}
其中 key 表示插值的位置, 0~1. 
value 为颜色值. 
*/
heatmapOverlay = new BMapLib.HeatmapOverlay({ "radius": 20 });
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>

© 著作权归作者所有

a
粉丝 0
博文 1
码字总数 497
作品 0
昌平
程序员
私信 提问
手把手教你完成一个数据科学小项目(7):经纬度获取与BDP可视化

前言 请先阅读“中国年轻人正带领国家走向危机”,这锅背是不背? 一文,以对“手把手教你完成一个数据科学小项目”系列有个全局性的了解。 本系列代码统一开源在GitHub:DesertsX/gulius-p...

古柳_Deserts_X
2018/08/25
0
0
百度地图离线数据包V2,0

离线地图资源,完全可脱离互联网访问,正在发愁局域网或内网使用地图定位的小伙伴们福音来了。。。。。。哈哈哈哈哈!!! 支持各大主流浏览器 IE7、8、9、10、11,火狐、360浏览器、谷歌浏览...

ysw349686
2016/10/21
1.2K
2
NLP第4课:了解数据必备的文本可视化技巧

文字是传递信息最常用的载体,随着海量文本的涌现,信息超载和数据过剩等问题日益凸显,当大段大段的文字摆在面前,已经很少有人耐心、认真把它读完,人们急需一种更高效的信息接收方式,从视...

Element静婷
2019/03/27
0
0
百度地图离线开发

百度地图离线开发,用在内网于局域网项目开发上,完全脱离互联网访问,可支持完整的全国瓦片图下载,使用目前最新的V2.0百度API,支持热力,聚合,海量标注,根据范围米数来圈范围,画图工具...

ysw349686
2016/10/23
143
0
百度地图离线开发

百度地图离线开发,用在内网于局域网项目开发上,完全脱离互联网访问,可支持完整的全国瓦片图下载,使用目前最新的V2.0百度API,支持热力,聚合,海量标注,根据范围米数来圈范围,画图工具...

ysw349686
2016/10/23
706
0

没有更多内容

加载失败,请刷新页面

加载更多

Spring AOP-06-切入点类型

切入点是匹配连接点的拦截规则。之前使用的是注解@Pointcut,该注解是AspectJ中的。除了这个注解之外,Spring也提供了其他一些切入点类型: • 静态方法切入点StaticMethodMatcherPointcut •...

moon888
昨天
90
0
Class Loaders in Java

1. Introduction to Class Loaders Class loaders are responsible for loading Java classes during runtime dynamically to the JVM (Java Virtual Machine). Also, they are part of the ......

Ciet
昨天
78
0
以Lazada为例,看电商系统架构演进

什么是Lazada? Lazada 2012年成立于新加坡,是东南亚第一电商,2016年阿里投资10亿美金,2017年完成对lazada的收购。 业务模式上Lazada更偏重自营,类似于亚马逊,自建仓储和为商家提供服务...

春哥大魔王的博客
昨天
60
0
【自用】 Flutter Timer 简单用法

dart: void _startTime() async { _timer = Timer(Duration(seconds: sec), () { fun(xxx,yyy,zzz); }); } @override void dispose() { _timer.cancel()......

Tensor丨思悟
昨天
65
0
计算机实现原理专题--自动化(六)

目前实现的加减法器可以扩充到更高位宽的数值范围,不仅可以实现连续n个数的相加减,还可以实现其中几个数的相加减,并保存相应的结果。但是还不能应对某些场景,例如需要复用中间的临时结果...

FAT_mt
昨天
58
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部