heatmap.js调用百度地图api做热力图
来源:互联网 发布:如何淘宝买东西 编辑:程序博客网 时间:2024/05/22 09:41
做热力图使用heatmap.js模块然后就是来挑用百度地图api是他展现在百度地图上面
一首先你要申请一个百度地图api接口的密钥
申请网址
申请密钥之后,先登录上自己的账号然后创建应用
三就是来取一个应用名称,服务,类型全都不用动,ip白名单校验请设置为0.0.0.0/0,然后查看应用,把访问应用的AK码填入下面的代码里面
var points里面填入自己的经纬度
<!DOCTYPE html><html lang="en"><head><!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=你自己申请的码"></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:650px;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(116.418261, 39.921984); map.centerAndZoom(point, 15); // 初始化地图,设置中心点坐标和地图级别 map.enableScrollWheelZoom(); // 允许滚轮缩放 var points =[{"lng":"116.123421","lat":"39.612715","count":"37643"},{"lng":"116.647674","lat":"39.900081","count":"17000"},{"lng":"116.706551","lat":"39.690368","count":"38000"},];#这里面添加房价的经纬度,我的太多了,所以只拿了三个 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}); closeHeatmap(); //判断浏览区是否支持canvas function isSupportCanvas(){ var elem = document.createElement('canvas'); return !!(elem.getContext && elem.getContext('2d')); } 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}); } function openHeatmap(){ heatmapOverlay.show(); } function closeHeatmap(){ heatmapOverlay.hide(); }</script></body></html>四用浏览器打开 记得点击下面的开关
2 1
- heatmap.js调用百度地图api做热力图
- 百度地图api绘制热力图
- 借用heatmap.js热力图实现
- Leaflet+heatmap实现离线地图加载和热力图应用
- Leaflet+heatmap实现离线地图加载和热力图应用
- js使用heatmap热力图的一些操作
- heatmap.js 一个用canvas画热力图的利器
- heatmap.js 一个用canvas画热力图的利器
- heatmap.js 一个用canvas画热力图的利器
- heatmap.js 一个用canvas画热力图的利器
- Heatmap 热力图(1)
- 百度地图中添加动态热力图
- JS调用百度地图API
- js-调用百度地图api
- js调用百度地图API
- js调用百度地图API
- js调用百度地图api
- openlayer3热力图的实现 Heatmap
- 某场小考(1)
- 关于使用sklearn进行数据预处理 —— 归一化/标准化/正则化
- 初见Hibernate
- 《Spring in action》——学习总结(一)
- 简明Pyhton教程余下基础内容
- heatmap.js调用百度地图api做热力图
- Java8新特性接口的增强之default方法
- 表单处理的方案与注意事项(servlet)
- c语言-函数(1)
- java--jspsmartupload组件抛出异常总结
- nginx stream模块初探
- ScrollView下,ListView重复调用getview解决方案
- Ubuntu 16.04 安装 ownCloud
- 2015-2016 ACM-ICPC Southwestern Europe Regional Contest (SWERC 15) C