使用百度地图做GIS相关开发简单示例

GIS的应用现在越来越广泛，这里给大家分享一个简单demo，其他相关api需要去百度官网去查。
两个必备条件：
1.有一个百度的账号，后边需要使用百度账号生成key
2.必须有网，离线环境不支持。
这是一个demo，使用自己的key之后就可以直接用浏览器打开，这是效果图：

先看代码，后边再说那个至关重要的key

<!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=3.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(116.418261, 39.921984);map.centerAndZoom(point, 15);             // 初始化地图，设置中心点坐标和地图级别map.enableScrollWheelZoom(); // 允许滚轮缩放var points =[{"lng":116.418261,"lat":39.921984,"count":50},{"lng":116.423332,"lat":39.916532,"count":51},{"lng":116.419787,"lat":39.930658,"count":15},{"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.41773,"lat":39.919426,"count":42},{"lng":116.421107,"lat":39.916445,"count":4},{"lng":116.417521,"lat":39.917943,"count":27},{"lng":116.419812,"lat":39.920836,"count":23},{"lng":116.420682,"lat":39.91463,"count":60},{"lng":116.415424,"lat":39.924675,"count":8},{"lng":116.419242,"lat":39.914509,"count":15},{"lng":116.422766,"lat":39.921408,"count":25},{"lng":116.421674,"lat":39.924396,"count":21},{"lng":116.427268,"lat":39.92267,"count":1},{"lng":116.417721,"lat":39.920034,"count":51},{"lng":116.412456,"lat":39.92667,"count":7},{"lng":116.420432,"lat":39.919114,"count":11},{"lng":116.425013,"lat":39.921611,"count":35},{"lng":116.418733,"lat":39.931037,"count":22},{"lng":116.419336,"lat":39.931134,"count":4},{"lng":116.413557,"lat":39.923254,"count":5},{"lng":116.418367,"lat":39.92943,"count":3},{"lng":116.424312,"lat":39.919621,"count":100},{"lng":116.423874,"lat":39.919447,"count":87},{"lng":116.424225,"lat":39.923091,"count":32},{"lng":116.417801,"lat":39.921854,"count":44},{"lng":116.417129,"lat":39.928227,"count":21},{"lng":116.426426,"lat":39.922286,"count":80},{"lng":116.421597,"lat":39.91948,"count":32},{"lng":116.423895,"lat":39.920787,"count":26},{"lng":116.423563,"lat":39.921197,"count":17},{"lng":116.417982,"lat":39.922547,"count":17},{"lng":116.426126,"lat":39.921938,"count":25},{"lng":116.42326,"lat":39.915782,"count":100},{"lng":116.419239,"lat":39.916759,"count":39},{"lng":116.417185,"lat":39.929123,"count":11},{"lng":116.417237,"lat":39.927518,"count":9},{"lng":116.417784,"lat":39.915754,"count":47},{"lng":116.420193,"lat":39.917061,"count":52},{"lng":116.422735,"lat":39.915619,"count":100},{"lng":116.418495,"lat":39.915958,"count":46},{"lng":116.416292,"lat":39.931166,"count":9},{"lng":116.419916,"lat":39.924055,"count":8},{"lng":116.42189,"lat":39.921308,"count":11},{"lng":116.413765,"lat":39.929376,"count":3},{"lng":116.418232,"lat":39.920348,"count":50},{"lng":116.417554,"lat":39.930511,"count":15},{"lng":116.418568,"lat":39.918161,"count":23},{"lng":116.413461,"lat":39.926306,"count":3},{"lng":116.42232,"lat":39.92161,"count":13},{"lng":116.4174,"lat":39.928616,"count":6},{"lng":116.424679,"lat":39.915499,"count":21},{"lng":116.42171,"lat":39.915738,"count":29},{"lng":116.417836,"lat":39.916998,"count":99},{"lng":116.420755,"lat":39.928001,"count":10},{"lng":116.414077,"lat":39.930655,"count":14},{"lng":116.426092,"lat":39.922995,"count":16},{"lng":116.41535,"lat":39.931054,"count":15},{"lng":116.413022,"lat":39.921895,"count":13},{"lng":116.415551,"lat":39.913373,"count":17},{"lng":116.421191,"lat":39.926572,"count":1},{"lng":116.419612,"lat":39.917119,"count":9},{"lng":116.418237,"lat":39.921337,"count":54},{"lng":116.423776,"lat":39.921919,"count":26},{"lng":116.417694,"lat":39.92536,"count":17},{"lng":116.415377,"lat":39.914137,"count":19},{"lng":116.417434,"lat":39.914394,"count":43},{"lng":116.42588,"lat":39.922622,"count":27},{"lng":116.418345,"lat":39.919467,"count":8},{"lng":116.426883,"lat":39.917171,"count":3},{"lng":116.423877,"lat":39.916659,"count":34},{"lng":116.415712,"lat":39.915613,"count":14},{"lng":116.419869,"lat":39.931416,"count":12},{"lng":116.416956,"lat":39.925377,"count":11},{"lng":116.42066,"lat":39.925017,"count":38},{"lng":116.416244,"lat":39.920215,"count":91},{"lng":116.41929,"lat":39.915908,"count":54},{"lng":116.422116,"lat":39.919658,"count":21},{"lng":116.4183,"lat":39.925015,"count":15},{"lng":116.421969,"lat":39.913527,"count":3},{"lng":116.422936,"lat":39.921854,"count":24},{"lng":116.41905,"lat":39.929217,"count":12},{"lng":116.424579,"lat":39.914987,"count":57},{"lng":116.42076,"lat":39.915251,"count":70},{"lng":116.425867,"lat":39.918989,"count":8}];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});}//判断浏览区是否支持canvasfunction isSupportCanvas(){var elem = document.createElement('canvas');return !!(elem.getContext && elem.getContext('2d'));}
</script>

怎么生成这个key，看方法：
访问：http://lbsyun.baidu.com/index.php?title=jspopularGL/guide/getkey这个链接，找到这个

按照流程操作，基本没啥问题，就会给你生成一个key，以字符串的格式填在代码中的位置，用浏览器打开页面就可以看到效果了

使用百度地图做GIS相关开发简单示例相关推荐

基于百度地图做热力图
经过一天的学习,终于把基于百度地图做热力图搞出来了,现将流程分享如下: 1.收集整理数据 ** 一列地名,一列数据.如下图所示 2.将地名转换成经纬度只有转换为经纬度,才能自动定位在地图上的位置,为 ...
html5 百度地图api文档,开发指南--百度地图JavaScript API大众版.doc
开发指南--百度地图JavaScriptAPI大众版开发指南--百度地图JavaScriptAPI大众版简介 JavaScript API大众版 JavaScript API功能介绍百度地图Jav ...
Vue中使用百度地图做路径分析并根据起终点坐标模拟道路里程桩
1.我们先要在vue中引入百度地图的API 第一步:在vue中的index.html文件中加上一个script标签: <script type="text/javascript&quo ...
引用百度地图做的导航路径
引用百度地图做的导航路径 *主要有的功能为输入地址进行导航 * **用的话修改好自己的百度地图key 还有你的目的地改一下就可以直接用也添加了单击事件适用于移动端 ** 这是模糊查询下 ...
python函数名是变量_Python 变量做函数名的简单示例
这篇文章主要为大家详细介绍了Python 变量做函数名的简单示例,具有一定的参考价值,可以用来参考一下. 对python这个高级语言感兴趣的小伙伴,下面一起跟随512笔记的小编两巴掌来看看吧! PHP ...
ios 百度地图指定区域_iOS开发（第三方使用）——百度地图的简单使用（定位与当前位置的显示）...
使用cocoapods导入 pod 'BaiduMapKit' 在plist添加NSLocationAlwaysUsageDescription 去百度地图开发者中心注册帐号,并创建项目,拿到AK的值 ...
百度地图API二次开发小经验分享
最近在做一个物流后台系统,需要用地图来把订单地址展示出来,需要在地图上批量框选坐标进行排单,需要看到配送员的实时位置等等功能. 在高德地图.腾讯地图.百度地图三者间,我选了百度地图,没有原因,个人偏好 ...
转载百度地图API二次开发小经验分享
转载From:http://www.cnblogs.com/yiyiBlog/p/5122224.html 最近在做一个物流后台系统,需要用地图来把订单地址展示出来,需要在地图上批量框选坐标进行排单, ...
关于百度地图SDK的andriod开发的定位功能实现
基于Android Studio的汽车定位追踪系统的设计摘要:随着经济的发展和汽车化时代的到来,人们对于车辆的服务的智能化,便捷化提出了更高的要求.文章主要研究通过软件编写一个汽车定位追踪系统,并利 ...

使用百度地图做GIS相关开发简单示例

使用百度地图做GIS相关开发简单示例相关推荐

最新文章

热门文章