百度地图 API 开发指南
百度地图 API 开发指南
目录
简介 _______________________________________________________________ 3
什么使百度地图 API ______________________________________________________ 3
面向的读者 _____________________________________________________________ 3
兼容性 _________________________________________________________________ 3
获取 API ________________________________________________________________ 3
开发移动平台上的地图应用 _______________________________________________ 3
版本说明 _______________________________________________________________ 4
基础知识 ___________________________________________________________ 4
百度地图的“Hello, World” ________________________________________________ 4
准备页面 ______________________________________________________________________ 5
引用百度地图 API 文件 __________________________________________________________ 5
创建地图容器元素 ______________________________________________________________ 6
命名空间 ______________________________________________________________________ 6
创建地图实例 __________________________________________________________________ 6
创建点坐标 ____________________________________________________________________ 6
地图初始化 ____________________________________________________________________ 6
地图操作 _______________________________________________________________ 6
控件 _______________________________________________________________ 7
地图控件概述 ___________________________________________________________ 7
向地图添加控件 _________________________________________________________ 7
控制控件位置 ___________________________________________________________ 8
修改控件配置 ___________________________________________________________ 8
自定义控件 _____________________________________________________________ 8
覆盖物 _____________________________________________________________ 9
地图覆盖物概述 _________________________________________________________ 9
标注 __________________________________________________________________ 10
定义标注图标 _________________________________________________________________ 10
监听标注事件 _________________________________________________________________ 11
可托拽的标注 _________________________________________________________________ 11
内存释放 _____________________________________________________________________ 12
信息窗口 ______________________________________________________________ 12
折线 __________________________________________________________________ 12
1 / 27
百度地图 API 开发指南
自定义覆盖物 __________________________________________________________ 13
定义构造函数并继承 Overlay ____________________________________________________ 13
初始化自定义覆盖物 ___________________________________________________________ 13
绘制覆盖物 ___________________________________________________________________ 14
移除覆盖物 ___________________________________________________________________ 15
显示和隐藏覆盖物 _____________________________________________________________ 15
自定义其他方法 _______________________________________________________________ 15
添加覆盖物 ___________________________________________________________________ 16
事件 ______________________________________________________________ 16
地图事件概述 __________________________________________________________ 16
事件监听 ______________________________________________________________ 16
事件参数和 this _________________________________________________________ 17
移除事件监听 __________________________________________________________ 17
地图图层 __________________________________________________________ 18
地图图层概念 __________________________________________________________ 18
自定义图层 ____________________________________________________________ 18
工具 ______________________________________________________________ 18
地图工具概述 __________________________________________________________ 18
向地图添加工具 ________________________________________________________ 19
通过按钮控制工具的开启和关闭 __________________________________________ 19
拉框放大工具 __________________________________________________________ 20
服务 ______________________________________________________________ 20
地图服务概述 __________________________________________________________ 20
本地搜索 ______________________________________________________________ 20
配置搜索 _____________________________________________________________________ 21
结果面板 _____________________________________________________________________ 21
数据接口 _____________________________________________________________________ 21
周边搜索 _____________________________________________________________________ 22
范围搜索 _____________________________________________________________________ 23
公交导航 ______________________________________________________________ 23
结果面板 _____________________________________________________________________ 23
数据接口 _____________________________________________________________________ 24
驾车导航 ______________________________________________________________ 25
结果面板 _____________________________________________________________________ 25
数据接口 _____________________________________________________________________ 25
地址解析 ______________________________________________________________ 26
根据地址描述获得坐标 _________________________________________________________ 26
2 / 27
反向地址解析 _________________________________________________________________ 27
百度地图 API 开发指南
简介
什么使百度地图 API
百度地图 API 是一套由 JavaScript 语言编写的应用程序接口,它能够帮助您在网站中构
建功能丰富、交互性强的地图应用程序。
百度地图 API 不仅包含构建地图的基本功能接口,还提供了诸如本地搜索、路线规划等
数据服务。
面向的读者
API 是提供给那些具有一定 JavaScript 编程经验和了解面向对象概念的读者使用。此外,
读者还应该对地图产品有一定的了解。
您可能对地图的内部处理逻辑不是很了解,百度地图 API 会尽量将复杂的底层逻辑进行
隐藏和封装,以一种便于您理解的方式提供。
您在使用中遇到任何问题,都可以反馈给我们。
兼容性
浏览器:IE 6.0+、Firefox 3.0+、Opera 9.0+、Safari 3.0+、Chrome
操作系统:Windows、Mac、Linux
获取 API
通过地址 http://api.map.baidu.com/api 加载 API
参数 v 为当前 API 的版本号,目前最新版本为 1.1,services 参数表示是否加载服务
部分,true 表示加载,false 表示不加载。
开发移动平台上的地图应用
API 自 1.1 版本起开始支持 iPhone、Android 这样的移动平台。用户通过手机浏览器就可
以访问由地图 API 创建出来的应用。移动平台的屏幕尺寸通常比 PC 或笔记本要小,操作方
式也有所不同。为了更好的在手机浏览器上展示地图,我们有如下建议:
3 / 27
百度地图 API 开发指南
将地图容器高设置为 100%,使其充满整个屏幕,或者您也可以计算浏览器窗口的
大小并进行设置。
添加下面的 meta 标签:
这样做是为了让页面以正常比例进行显示并且禁止用户缩放页面的操作。
您可以参考 Apple's Developer documentation 和 Android documentation 获得更多信息
版本说明
地址 http://api.map.baidu.com/api?v=1.1 中的参数 v 表示您加载 API 的版本,例如当前
API 的最新版本为 1.1,则您可在地址中添加 v=1.1。当 API 升级后,如果已有接口在使用、
命名等方面发生了变化,我们会为其增加一个新的版本号,这不会对您现有的应用造成任何
影响。如果升级只是修复一些 bug 或者在不影响现有功能的前提下增加接口、改善性能,则
版本号不会发生变化。您可以在更新日志页面查看版本的变化
问题解答
如果您在使用百度地图 API 中遇到问题,请尝试通过以下途径解决:
确认您使用了正确的地图 API 密钥。
对于通过 localhost 或者文件方式调用 API,不需要使用密钥。
访问百度地图 API 吧,查找相关问题的帖子,或者将您的问题发布到贴吧中。
基础知识
百度地图的“Hello, World”
开始学习百度地图 API 最简单的方式是看一个简单的示例。以下代码创建了一个地图
并以天安门作为地图的中心:
1.
2.
3.
4.
5.
6.
Hello, World
7.
12.
4 / 27
百度地图 API 开发指南
13.
14.
15.
16.
17.
22.
23.
下面我们分步向您介绍:
准备页面
根据 HTML 标准,每一份 HTML 文档都应该声明正确的文档类型,我们建议您使用
最新的符合 HTML5 规范的文档声明:
1.
您也可以根据需要选择其他类型的文档声明,这样浏览器会以标准的方式对页面进行渲
染,保证页面最大的兼容性。我们不建议您使用 quirks 模式进行开发。下面我们添加一个
meta 标签,以便使您的页面更好的在移动平台上展示。
1.
接着我们设置样式,使地图充满整个浏览器窗口:
1.
引用百度地图 API 文件
当您引用地图 API 文件时,需要使用自己申请的 API 密钥。
1.
2.
5 / 27
百度地图 API 开发指南
创建地图容器元素
地图需要一个 HTML 元素作为容器,这样才能展现到页面上。这里我们创建了一个 div
元素。
1.
命名空间
API 使用 BMap 作为命名空间,所有类均在该命名空间之下,比如:BMap.Map、
BMap.Control、BMap.Overlay
创建地图实例
位于 BMap 命名空间下的 Map 类表示地图,通过 new 操作符可以创建一个地图实例。
其参数可以是元素 id 也可以是元素对象。
注意在调用此构造函数时应确保容器元素已经添加到地图上。
1. var map = new BMap.Map("container");
创建点坐标
这里我们使用 BMap 命名空间下的 Point 类来创建一个坐标点。Point 类描述了一个地理
坐标点,其中 116.404 表示经度,39.915 表示纬度。
1. var point = new BMap.Point(116.404, 39.915);
地图初始化
在创建地图实例后,我们需要对其进行初始化,BMap.Map.centerAndZoom()方法要求设
置中心点坐标和地图级别。
地图必须经过初始化才可以执行其他操作。
1. map.centerAndZoom(point,15);
地图操作
地图被实例化并完成初始化以后,就可以与其进行交互了。API 中的地图对象的外观与
行为与百度地图网站上交互的地图非常相似。它支持鼠标拖拽、滚轮缩放、双击放大等交互
功能。您也可以修改配置来改变这些功能。
6 / 27
百度地图 API 开发指南
您还可以通过编程的方式与地图交互。Map 类提供了若干修改地图状态的方法。例如:
setCenter()、panTo()、zoomTo()等等。
下面示例显示一个地图,等待两秒钟后,它会移动到新中心点。panTo()方法将让地图平
滑移动至新中心点,如果移动距离超过了当前地图区域大小,则地图会直跳到该点。
1. var map = new BMap.Map("container");
2. var point = new BMap.Point(116.404, 39.915);
3. map.centerAndZoom(point, 15);
4. window.setTimeout(function(){
5. map.panTo(new BMap.Point(116.409, 39.918));
6. }, 2000);
控件
地图控件概述
百度地图上负责与地图交互的 UI 元素称为控件。百度地图 API 中提供了丰富的控件,
您还可以通过 BMap.Control 来实现自定义控件。
地图 API 中提供的控件有:
Control:控件的抽象基类,所有控件均继承此类的方法、属性。通过此类您可实现
自定义控件。
NavigationControl:地图平移缩放控件,默认位于地图左上方,它包含控制地图的
平移和缩放的功能。
OverviewMapControl:缩略地图控件,默认位于地图右下方,是一个可折叠的缩略
地图。
ScaleControl:比例尺控件,默认位于地图左下方,显示地图的比例关系。
CopyrightControl:版权控件,默认位于地图左下方。
所有这些控件都基于 BMap.Control 类。
向地图添加控件
可以使用 BMap.Map.addControl()方法向地图添加控件。在此之前地图需要进行初始化。
例如,要将标准地图控件添加到地图中,可在代码中添加如下内容:
1. var map = new BMap.Map("container");
2. map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);
3. map.addControl(new BMap.NavigationControl());
4.
可以向地图添加多个控件。在本例中我们向地图添加一个平移缩放控件、一个比例尺控
7 / 27
百度地图 API 开发指南
件和一个缩略图控件。在地图中添加控件后,它们即刻生效。
1. map.addControl(new BMap.NavigationControl());
2. map.addControl(new BMap.ScaleControl());
3. map.addControl(new BMap.OverviewMapControl());
控制控件位置
初始化控件时,可提供一个可选参数,参数类型为一个 JavaScript 对象。其中 anchor 和
offsetX、offsetY 共同控制控件在地图上的位置。anchor 表示控件停靠在地图的哪个角,允许
的值为:
BMAP_ANCHOR_TOP_LEFT
BMAP_ANCHOR_TOP_RIGHT
BMAP_ANCHOR_BOTTOM_LEFT
BMAP_ANCHOR_BOTTOM_RIGHT
除了指定停靠位置外,还可以提供偏移量,用来指示控件距离地图边界相隔多少像素。
本示例将标准地图控件放置在地图的右上角,间隔 10 个像素。
1. var opts = {anchor: BMAP_ANCHOR_TOP_RIGHT, offset: new BMap.Size(10, 10)}
2. map.addControl(new BMap.NavigationControl(opts));
修改控件配置
地图 API 的控件提供了丰富的配置参数,您可参考 API 文档来修改它们以便得到符合要
求的控件外观。
本示例将调整平移缩放地图控件的外观。
1. var opts = {type: BMAP_NAVIGATION_CONTROL_SMALL}
2. map.addControl(new BMap.NavigationControl(opts));
自定义控件
百度地图 API 允许您通过继承 BMap.Control 来创建自定义地图控件。(注意 JavaScript
是通过 prototype 属性进行继承的)
要创建可用的自定义控件,您需要实现类定义中的一个抽象方法并给两个属性赋值,它
们是:initialize()和 defaultAnchor、defaultOffset。initialize()方法必须返回控件容器的 DOM 元
素,defaultAnchor 为控件默认的停靠位置,defaultOffset 为控件默认的间隔距离。
所有自定义的地图控件中的 DOM 元素最终都应该添加到地图容器(即地图所在的 DOM
元素)中去,这个地图容器可以通过 BMap.Map.getContainer()方法获得。
在此示例中,我们创建一个简单的放大控件,每一次点击将地图放大两个级别。它具有
文本标识,而不是平移缩放控件中使用的图形图标。
8 / 27