百度地图API新手入门
最近，共享单车着实火了一把，市场竞争也是异常的激烈，百花争艳，百家争鸣，群雄逐鹿，最后鹿死谁手，如今还不得而知，不过能够确定的是细节决定成败，更重要的还在于用户的体验。javascript
用过的同窗们都会知道，打开共享单车APP软件，便可看到以地图的形式展现车辆的分布状况以及离本身最近的车辆，这样就能够很方便很快速的找到车了，那么，这样的技术是如何实现的呢？以前也发过两篇关于百度地图API的文章，有网友评论说效果很好，我也说要持续更新的，结果呢，工做太忙，就把这事搁下了，今天呢，咱们仍是一块儿来重温一下百度地图的初阶教程吧。php
（1）进入百度地图开放平台：http://lbsyun.baidu.com/index.php （别忘了先登陆哦）css
（2）点击“开发”，选择“JavaScript API”html
（3）若是以前已经申请过百度地图开发者而且已经认证过，那么应该已经有了密钥了，直接查看应用就能够看到了，若是以前没有过上述操做，那么咱们要先申请密钥，即“获取密钥”java
（4）有了密钥，咱们就能够开始借助百度地图开放平台开发咱们本身的地图了。下面咱们来初始化一个地图：api
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> 5 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 6 <title>Hello, World</title> 7 <style type="text/css"> 8 html{height:100%} 9 body{height:100%;margin:0px;padding:0px} 10 #container{height:100%} 11 </style> 12 <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=您的密钥"> 13 //v2.0版本的引用方式：src="http://api.map.baidu.com/api?v=2.0&ak=您的密钥" 14 //v1.4版本及之前版本的引用方式：src="http://api.map.baidu.com/api?v=1.4&key=您的密钥&callback=initialize" 15 </script> 16 </head> 17 18 <body> 19 <div id="container"></div> 20 <script type="text/javascript"> 21 var map = new BMap.Map("container"); // 建立地图实例 22 var point = new BMap.Point(116.404, 39.915); // 建立点坐标 23 map.centerAndZoom(point, 15); // 初始化地图，设置中心点坐标和地图级别 24 </script> 25 </body> 26 </html>
其中，最关键的在于咱们要引入相应的百度地图API文件，也就是浏览器
1 <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=您的密钥">
这样咱们才能使用API给咱们提供的BMap命名空间，全部类均在该命名空间之下，好比：BMap.Map,BMap.Control,BMap.Overlay。微信
好了，保存一下，在浏览器中运行。ui
效果如上图所示，咱们还能够在进行一下特效上的处理：spa
（5）咱们可使用panTo方法在2秒钟以后使地图平滑到新的中心点，若是移动距离超过了当前地图大小，则会直接跳到该点。
var map = new BMap.Map("container");
var point = new BMap.Point(116.404, 39.915);
map.centerAndZoom(point, 15);
window.setTimeout(function(){
map.panTo(new BMap.Point(116.409, 39.918));
}, 2000);
以上就是百度地图API的初阶部分，主要是申请一个密钥，而后引用百度地图API提供给咱们的命名空间，初始化一个地图出来，并进行平移操做。后续咱们会更深一步的探索百度地图的更多好玩有趣的东西。
并且，从今天开始，鄙人的微信公众号开始同步更新相关技术知识，扫描下方二维码，欢迎你们关注。