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

用过的同学们都会知道,打开共享单车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. Unity游戏开发——自动为动画剪辑添加事件 之 最后几帧的事件不能被调用的问题

    最近在做一个根据配置表自动生成动画剪辑clip以及controller的功能.做法是根据配置表配置的动作以及每个动作的关键帧,自动为每个clip添加事件.这样做可以把动画的事件处理在游戏运行之前就计算 ...

  2. JAVA中获取当前运行的类名,方法名,行数

    JAVA中获取当前运行的类名,方法名,行数 public static String getTraceInfo(){ StringBuffer sb = new StringBuffer(); Sta ...

  3. 在ubuntu下增加root用户并登录

    1.打开终端. 2.输入sudo gedit /usr/share/lightdm/lightdm.conf.d/50-ubuntu.conf 3.在弹出的编辑框里输入:greeter-show-ma ...

  4. 使AIX下ksh可以翻查上一条命令

    http://blog.csdn.net/wangjialiang/article/details/7106393 http://www.blogjava.net/03081626/archive/2 ...

  5. jQuery disabled 元素

    http://www.jb51.net/article/19342.htm 在jquery中可以通过jqueryObj.attr("disabled","disabled ...

  6. Swift3.0服务端开发(五) 记事本的开发(iOS端+服务端)

    前边以及陆陆续续的介绍了使用Swift3.0开发的服务端应用程序的Perfect框架.本篇博客就做一个阶段性的总结,做一个完整的实例,其实这个实例在<Swift3.0服务端开发(一)>这篇 ...

  7. (@WhiteTaken)Unity中Invoke的用法

    今天无意间读到大神写的代码,看到了Invoke函数,于是产生兴趣.后来才明白自己要学习的东西还有很多. 下面讲用法. Invoke是延时调用函数,在用Invoke函数之前需要引入命名空间using U ...

  8. Mac和Linux系统的:Arp欺骗源码

    linux系统, 简化版的ARP欺骗工具 精简版, 没有很多代码, 只要把准备好的数据, 发送给到网卡接口, 利用这个工具, 可以让局域网内的一台计算机暂时掉线: #include <stdio ...

  9. uml系列(八)——部署图与构件图

    之前说了uml的设计图,现在说一下uml的最后两种图:构件图.部署图.这两种图之所以放在一起是因为它们都是软件的实现图. 构件图           构件图是描述一组构件之间的组织与依赖关系的模型.那 ...

  10. .Net程序员学用Oracle系列(17):数据库管理工具(SQL Plus)

    1.数据库管理工具概述 2.SQL Plus 实用命令参考 2.1.连接/断开命令 2.2.执行 SQL 语句 2.3.执行 PL/SQL 语句 2.4.文件操作命令 2.5.修改用户密码 2.6.执 ...