最近，共享单车着实火了一把，市场竞争也是异常的激烈，百花争艳，百家争鸣，群雄逐鹿，最后鹿死谁手，现在还不得而知，不过可以肯定的是细节决定成败，更重要的还在于用户的体验。

用过的同学们都会知道，打开共享单车APP软件，即可看到以地图的形式展示车辆的分布情况以及离自己最近的车辆，这样就可以很方便很快速的找到车了，那么，这样的技术是如何实现的呢？之前也发过两篇关于百度地图API的文章，有网友评论说效果很好，我也说要持续更新的，结果呢，工作太忙，就把这事搁下了，今天呢，我们还是一起来重温一下百度地图的初阶教程吧。

（1）进入百度地图开放平台：http://lbsyun.baidu.com/index.php  （别忘了先登录哦）

（2）点击“开发”，选择“JavaScript API”

（3）如果之前已经申请过百度地图开发者并且已经认证过，那么应该已经有了密钥了，直接查看应用就可以看到了，如果之前没有过上述操作，那么我们要先申请密钥，即“获取密钥”

（4）有了密钥，我们就可以开始借助百度地图开放平台开发我们自己的地图了。下面我们来初始化一个地图：

 <!DOCTYPE html>

 <html>

 <head>

 <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />

 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

 <title>Hello, World</title>

 <style type="text/css">

 html{height:100%}

 body{height:100%;margin:0px;padding:0px}

 #container{height:100%}

 </style>

 <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=您的密钥">

 //v2.0版本的引用方式：src="http://api.map.baidu.com/api?v=2.0&ak=您的密钥"

 //v1.4版本及以前版本的引用方式：src="http://api.map.baidu.com/api?v=1.4&key=您的密钥&callback=initialize"

 </script>

 </head>  

 <body>

 <div id="container"></div>

 <script type="text/javascript">

 var map = new BMap.Map("container");          // 创建地图实例

 var point = new BMap.Point(116.404, 39.915);  // 创建点坐标

 map.centerAndZoom(point, 15);                 // 初始化地图，设置中心点坐标和地图级别

 </script>

 </body>

 </html>

其中，最关键的在于我们要引入相应的百度地图API文件，也就是

 <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=您的密钥">

这样我们才能使用API给我们提供的BMap命名空间，所有类均在该命名空间之下，比如：BMap.Map,BMap.Control,BMap.Overlay。

好了，保存一下，在浏览器中运行。

　　效果如上图所示，我们还可以在进行一下特效上的处理：

　　（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提供给我们的命名空间，初始化一个地图出来，并进行平移操作。后续我们会更深一步的探索百度地图的更多好玩有趣的东西。

而且，从今天开始，鄙人的微信公众号开始同步更新相关技术知识，扫描下方二维码，欢迎大家关注。
　　

百度地图API新手入门的更多相关文章

  1. 百度地图API 基础入门

    一.注册账号,获取密钥 流程-注册-登录-控制台-创建应用-获取密钥: 1.你想要调取百度地图,首先,你需要注册一个百度账号,获取密匙. 2.密钥获取以后,引入到你需要调用百度地图的界面中. 二.创建 ...

  2. ios 百度地图api 入门

    百度地图api 官方教程: http://developer.baidu.com/map/index.php?title=iossdk 这个非常好, 很适合新手 CLLocationCoordinat ...

  3. 基于百度地图api + AngularJS 的入门地图

    转载请注明地址:http://www.cnblogs.com/enzozo/p/4368081.html 简介: 此入门地图为简易的“广州大学城”公交寻路地图,采用很少量的AngularJS进行inp ...

  4. Winform实现用多线程、百度地图API解析某公司的物理地址

    前言 作为一个很挫的C#新手总喜欢自己写点儿不着边际的东西,本人是个新手加菜鸟,写B/S的,工作中,任务完成了,空闲下来,总想继续学点儿什么,由此触发了本篇文章了.个人一直认为,.NET中,C/S所要 ...

  5. C#调用百度地图API经验分享（一）

    最近客户提了一个需求,要在网站中添加百度地图的显示,其实原来是有谷歌地图的,但由于谷歌在大陆遭到封杀,只好再给用户增加一个选择了. 下面我将自己最近整理的一些知识分享给大家. 如何使用百度地图API: ...

  6. C#调用百度地图API

    1.打开链接http://developer.baidu.com/map/jshome.htm这里有很多DEMO,或者你直接百度搜索"百度地图API",第一个就是.进入后有很多方向 ...

  7. 百度地图API地点搜索-获取经纬度

    分享一下地图上的地点搜索和鼠标点击获取地点经纬度,这些都是地图比较基本和实用的代码,其中还包括了根据用户IP进行地图的显示.改变地图上的鼠标样式.启用滚轮缩放等,算是半入门吧,其他的一些可以自己参考百 ...

  8. 简单几行代码使用百度地图API接口分页获取信息

    首发于: 万能助手扩展开发:使用百度地图API接口分页获取信息_电脑计算机编程入门教程自学 http://jianma123.com/viewthread.aardio?threadid=426 使用 ...

  9. ASP.NET中调用百度地图API

    1.打开链接http://developer.baidu.com/map/jshome.htm这里有很多DEMO,或者你直接百度搜索“百度地图API”,第一个就是.进入后有很多方向供你选择,由于现在开 ...

随机推荐

  1. HTML5 简介、浏览器支持、新元素

    什么是 HTML5? HTML5 是最新的 HTML 标准. HTML5 是专门为承载丰富的 web 内容而设计的,并且无需额外插件. HTML5 拥有新的语义.图形以及多媒体元素. HTML5 提供 ...

  2. #DP# ----- OpenJudge数字组合

    OpenJudge 2985:数字组合 总时间限制:1000ms  内存限制: 65536kB 描述 有n个正整数,找出其中和为t(t也是正整数)的可能的组合方式.如:n=5,5个数分别为1,2,3, ...

  3. jdbc数据连接池dbcp要导入的jar包

    jdbc数据连接池dbcp要导入的jar包 只用导入commons-dbcp-x.y.z.jarcommons-pool-a.b.jar

  4. loadrunner：从数据库中取值进行参数化

    下面我们介绍用数据库中的用户名来参数化登陆用户名. 框选住登陆名,点鼠标右键,弹出对话框,选择"替换为新参数"弹出对话框,此时参数名输入:name,参数类型选择File,如图 点& ...

  5. Fiddler 模拟请求的操作方法

    此文记录使用Fidder Web Debugger工具,模拟请求的操作步骤! 首先简述一下fiddler的使用: 1.下载安装Fidder抓包工具. 2.打开fiddler发现有左边的栏有请求的url ...

  6. 【python基础】 Tkinter小构件之canvas 画布

    [python之tkinter画布] 要画布就要使用tkinter的小构件,canvas(结构化的图形,用于绘制图形,创建图形编辑器以及实现自定制的小构件类) 我们先使用create_rectangl ...

  7. SQL Server事务、隔离级别详解（二十九）

    前言 事务一直以来是我最薄弱的环节,也是我打算重新学习SQL Server的出发点,关于SQL Server中事务将分为几节来进行阐述,Always to review the basics. 事务简 ...

  8. 深入了解GCD

    首先提出一些问题: dispatch_async 函数如何实现,分发到主队列和全局队列有什么区别,一定会新建线程执行任务么? dispatch_sync 函数如何实现,为什么说 GCD 死锁是队列导致 ...

  9. Hadoop权威指南:HDFS-目录,查询文件系统,删除文件

    Hadoop权威指南:HDFS-目录,查询文件系统,删除文件 [TOC] 目录 FileSystem实例提供了创建目录的方法 public boolean mkdirs(Path f) throws ...

  10. ubuntu14.04下手动安装eclipse

    ubuntu14.04下手动安装eclipse 第一步: 安装jdk 第二步: 下载eclipse,假设下载的文件文件名为eclipse.tar.gz 第三步: 解压 sudo -zxvf ./ecl ...