百度地图 API1.3开发指南
API 1.3 2012-5-11
简介 .................................................................................................................................................. 3
什么是百度地图 API? ........................................................................................................... 3
面向的读者 ............................................................................................................................... 3
获取 API ................................................................................................................................... 3
坐标转换 ................................................................................................................................... 3
开发移动平台上的地图应用 ................................................................................................... 3
异步加载 ................................................................................................................................... 4
兼容性....................................................................................................................................... 4
版本说明 ................................................................................................................................... 5
问
题
快递公司问题件快递公司问题件货款处理关于圆的周长面积重点题型关于解方程组的题及答案关于南海问题
解答 ................................................................................................................................... 5
基础知识........................................................................................................................................... 5
百度地图的“Hello, World” ...................................................................................................... 5
准备页面 ........................................................................................................................... 6
引用百度地图 API文件 .................................................................................................. 6
创建地图容器元素 ........................................................................................................... 6
命名空间 ........................................................................................................................... 7
创建地图实例 ................................................................................................................... 7
创建点坐标 ....................................................................................................................... 7
地图初始化 ....................................................................................................................... 7
地图配置与操作 ....................................................................................................................... 7
控件 .................................................................................................................................................. 8
地图控件概述 ........................................................................................................................... 8
向地图添加控件 ....................................................................................................................... 8
控制控件位置 ........................................................................................................................... 9
控件停靠位置 ................................................................................................................... 9
控件位置偏移 ................................................................................................................... 9
修改控件配置 ......................................................................................................................... 10
自定义控件 ............................................................................................................................. 10
定义构造函数并继承 Control ........................................................................................ 11
初始化自定义控件 ......................................................................................................... 11
添加自定义控件 ............................................................................................................. 12
覆盖物 ............................................................................................................................................ 12
地图覆盖物概述 ..................................................................................................................... 12
标注......................................................................................................................................... 12
定义标注图标 ................................................................................................................. 13
监听标注事件 ................................................................................................................. 14
可托拽的标注 ................................................................................................................. 14
内存释放 ......................................................................................................................... 14
信息窗口 ................................................................................................................................. 14
折线......................................................................................................................................... 15
添加折线 ......................................................................................................................... 15
自定义覆盖物 ......................................................................................................................... 15
定义构造函数并继承 Overlay ....................................................................................... 15
初始化自定义覆盖物 ..................................................................................................... 16
绘制覆盖物 ..................................................................................................................... 17
移除覆盖物 ..................................................................................................................... 17
显示和隐藏覆盖物 ......................................................................................................... 17
自定义其他方法 ............................................................................................................. 18
添加覆盖物 ..................................................................................................................... 18
事件 ................................................................................................................................................ 19
地图事件概述 ......................................................................................................................... 19
事件监听 ................................................................................................................................. 19
事件参数和 this ...................................................................................................................... 20
移除监听事件 ......................................................................................................................... 20
地图图层......................................................................................................................................... 21
地图图层概念 ......................................................................................................................... 21
添加和移除图层 ..................................................................................................................... 21
自定义图层 ............................................................................................................................. 21
地图坐标系 ..................................................................................................................... 21
定义取图规则 ................................................................................................................. 23
添加和移除自定义图层 ................................................................................................. 23
工具 ................................................................................................................................................ 24
地图工具概述 ......................................................................................................................... 24
向地图添加工具 ..................................................................................................................... 24
通过按钮控制工具的开启和关闭 ......................................................................................... 25
拉框放大工具 ......................................................................................................................... 25
服务 ................................................................................................................................................ 25
地图服务概述 ......................................................................................................................... 25
本地搜索 ................................................................................................................................. 26
配置搜索 ......................................................................................................................... 26
结果面板 ......................................................................................................................... 27
数据接口 ......................................................................................................................... 27
周边搜索 ......................................................................................................................... 28
范围搜索 ......................................................................................................................... 28
公交导航 ................................................................................................................................. 28
结果面板 ......................................................................................................................... 29
数据接口 ......................................................................................................................... 29
驾车导航 ................................................................................................................................. 30
结果面板 ......................................................................................................................... 30
数据接口 ......................................................................................................................... 30
地理编码 ................................................................................................................................. 31
根据地址描述获得坐标 ................................................................................................. 31
反向地理编码 ................................................................................................................. 32
简介
什么是百度地图 API?
百度地图 API是一套由 JavaScript语言编写的应用程序接口,它能够帮助您在网站中构建功能丰富、交互
性强的地图应用。百度地图 API包含了构建地图基本功能的各种接口,提供了诸如本地搜索、路线规划等
数据服务。
面向的读者
API是提供给那些具有一定 JavaScript 编程经验和了解面向对象概念的读者使用。此外,读者还应该对地
图产品有一定的了解。
您在使用中遇到任何问题,都可以通过 API贴吧或交流群反馈给我们。
获取 API
地图 API是由 JavaScript语言编写的,您在使用之前需要通过
其中参数 v为 API当前的版本号,目前最新版本为1.3。在1.2版本之前您还可以设置 services参数,以告
知 API是否加载服务部分,true
表
关于同志近三年现实表现材料材料类招标技术评分表图表与交易pdf视力表打印pdf用图表说话 pdf
示加载,false表示不加载,默认为 true。
坐标转换
国际经纬度坐标标准为WGS-84,国内必须至少使用国测局制定的 GCJ-02,对地理位置进行首次加密。百度
坐标在此基础上,进行了 BD-09二次加密措施,更加保护了个人隐私。百度对外接口的坐标系并不是 GPS
采集的真实经纬度,需要通过坐标转换接口进行转换。
坐标转换示例:http://dev.baidu.com/wiki/static/map/API/examples/?v=1.3&0_6#0&6
批量坐标转换示例:http://dev.baidu.com/wiki/static/map/API/examples/?v=1.3&0_7#0&7
开发移动平台上的地图应用
API自1.1版本起开始支持 iPhone、Android这样的移动平台。用户通过手机浏览器就可以访问由地图 API
创建出来的应用。移动平台的屏幕尺寸通常比 PC 或笔记本要小,操作方式也有所不同。为了更好的在手
机浏览器上展示地图,我们有如下建议:
将地图容器高设置为100%,使其充满整个屏幕,或者您也可以计算浏览器窗口的大小并进行设置。
添加下面的meta标签:
这样做是为了让页面以正常比例进行显示并且禁止用户缩放页面的操作。
您可以参考 Apple's Developer documentation 和 Android documentation 获得更多信息。
异步加载
API 1.1,1.2和1.3版本支持异步加载,您可以在引用脚本的时候添加 callback 参数,当脚本加载完成后
callback函数会被立刻调用。请参考下面的使用示例:
异步加载
兼容性
浏览器:IE 6.0+、Firefox 3.6+、Opera 9.0+、Safari 3.0+、Chrome
操作系统:Windows、Mac、Linux
移动平台:iPhone、Android
版本说明
地址 http://api.map.baidu.com/api?v=1.3 中的参数 v 表示您加载 API 的版本,例如当前 API 的最新版本
为1.3,则您可在地址中添加 v=1.3。当 API升级后,如果已有接口在使用、命名等方面发生了变化,我们
会为其增加一个新的版本号,这不会对您现有的应用造成任何影响。如果升级只是修复一些 bug或者在不
影响现有功能的前提下增加接口、改善性能,则版本号不会发生变化。您可以在更新日志页面查看版本的
变化。
问题解答
如果您在使用百度地图 API中遇到问题,请尝试通过以下途径解决:
确认您使用了正确的地图 API地址。
访问百度地图 API吧,查找相关问题的帖子,或者将您的问题发布到贴吧中。
常看《常见问题》指南
http://dev.baidu.com/wiki/map/index.php?title=%E5%B8%B8%E8%A7%81%E9%97%AE%
E9%A2%98
加入百度 HI群
基础知识
百度地图的“Hello, World”
开始学习百度地图 API最简单的方式是看一个简单的示例。以下代码创建了一个地图并以天安门作为地图
的中心:
Hello, World
下面我们分步向您介绍:
准备页面
根据 HTML标准,每一份 HTML文档都应该声明正确的文档类型,我们建议您使用最新的符合 HTML5规
范的文档声明:
您也可以根据需要选择其他类型的文档声明,这样浏览器会以标准的方式对页面进行渲染,保证页面最大
的兼容性。我们不建议您使用 quirks模式进行开发。
下面我们添加一个 meta标签,以便使您的页面更好的在移动平台上展示。
接着我们设置样式,使地图充满整个浏览器窗口:
引用百度地图 API文件
创建地图容器元素
地图需要一个 HTML元素作为容器,这样才能展现到页面上。这里我们创建了一个 div元素。
命名空间
API 使用 BMap 作为命名空间,所有类均在该命名空间之下,比如:BMap.Map、BMap.Control、
BMap.Overlay。
创建地图实例
var map = new BMap.Map("container");
位于 BMap命名空间下的 Map类表示地图,通过 new操作符可以创建一个地图实例。其参数可以是元素
id也可以是元素对象。
注意在调用此构造函数时应确保容器元素已经添加到地图上。
创建点坐标
var point = new BMap.Point(116.404, 39.915);
这里我们使用 BMap 命名空间下的 Point 类来创建一个坐标点。Point 类描述了一个地理坐标点,其中
116.404表示经度,39.915表示纬度。
地图初始化
map.centerAndZoom(point, 15);
在创建地图实例后,我们需要对其进行初始化,BMap.Map.centerAndZoom()方法要求设置中心点坐标和
地图级别。 地图必须经过初始化才可以执行其他操作。
地图配置与操作
地图被实例化并完成初始化以后,就可以与其进行交互了。API 中的地图对象的外观与行为与百度地图网
站上交互的地图非常相似。它支持鼠标拖拽、滚轮缩放、双击放大等交互功能。您也可以修改配置来改变
这些功能。 比如,默认情况下地图不支持鼠标滚轮缩放操作,因为这样可能会影响整个页面的用户体验,
但是如果您希望在地图中使用鼠标滚轮控制缩放,则可以调用 map.enableScrollWheelZoom方法来开启。
配置选项可以在 Map类参考的配置方法一节中找到。
此外,您还可以通过编程的方式与地图交互。Map类提供了若干修改地图状态的方法。例如:setCenter()、
panTo()、zoomTo()等等。
下面示例显示一个地图,等待两秒钟后,它会移动到新中心点。panTo()方法将让地图平滑移动至新中心点,
如果移动距离超过了当前地图区域大小,则地图会直跳到该点。
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);
控件
地图控件概述
百度地图上负责与地图交互的 UI元素称为控件。百度地图 API中提供了丰富的控件,您还可以通过 Control
类来实现自定义控件。
地图 API中提供的控件有:
Control:控件的抽象基类,所有控件均继承此类的方法、属性。通过此类您可实现自定义控件。
NavigationControl:地图平移缩放控件,默认位于地图左上方,它包含控制地图的平移和缩放的功能。
OverviewMapControl:缩略地图控件,默认位于地图右下方,是一个可折叠的缩略地图。
ScaleControl:比例尺控件,默认位于地图左下方,显示地图的比例关系。
MapTypeControl:地图类型控件,默认位于地图右上方。
CopyrightControl:版权控件,默认位于地图左下方。
向地图添加控件
可以使用 Map.addControl()方法向地图添加控件。在此之前地图需要进行初始化。例如,要将标准地图控
件添加到地图中,可在代码中添加如下
内容
财务内部控制制度的内容财务内部控制制度的内容人员招聘与配置的内容项目成本控制的内容消防安全演练内容
:
var map = new BMap.Map("container");
map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);
map.addControl(new BMap.NavigationControl());
可以向地图添加多个控件。在本例中我们向地图添加一个平移缩放控件、一个比例尺控件和一个缩略图控
件。在地图中添加控件后,它们即刻生效。
map.addControl(new BMap.NavigationControl());
map.addControl(new BMap.ScaleControl());
map.addControl(new BMap.OverviewMapControl());
map.addControl(new BMap.MapTypeControl());
map.setCurrentCity("北京"); // 仅当设置城市信息时,MapTypeControl的切换功能才能可用
控制控件位置
初始化控件时,可提供一个可选参数,其中的 anchor和 offset属性共同控制控件在地图上的位置。
控件停靠位置
anchor表示控件的停靠位置,即控件停靠在地图的哪个角。当地图尺寸发生变化时,控件会根据停靠位置
的不同来调整自己的位置。anchor允许的值为:
BMAP_ANCHOR_TOP_LEFT 表示控件定位于地图的左上角。
BMAP_ANCHOR_TOP_RIGHT 表示控件定位于地图的右上角。
BMAP_ANCHOR_BOTTOM_LEFT 表示控件定位于地图的左下角。
BMAP_ANCHOR_BOTTOM_RIGHT 表示控件定位于地图的右下角。
控件位置偏移
除了指定停靠位置外,还可以通过偏移量来指示控件距离地图边界有多少像素。如果两个控件的停靠位置
相同,那么控件可能会重叠在一起,这时就可以通过偏移值使二者分开显示。
本示例将比例尺放置在地图的左下角,由于 API默认会有版权信息,因此需要添加一些偏移值以防止控件
重叠。
var opts = {offset: new BMap.Size(150, 5)}
map.addControl(new BMap.ScaleControl(opts));
修改控件配置
地图 API的控件提供了丰富的配置参数,您可参考 API文档来修改它们以便得到符合要求的控件外观。例
如,NavigationControl控件就提供了如下类型:
BMAP_NAVIGATION_CONTROL_LARGE 表示显示完整的平移缩放控件。
BMAP_NAVIGATION_CONTROL_SMALL 表示显示小型的平移缩放控件。
BMAP_NAVIGATION_CONTROL_PAN 表示只显示控件的平移部分功能。
BMAP_NAVIGATION_CONTROL_ZOOM 表示只显示控件的缩放部分功能。
下图从左向右依次展示了上述不同类型的控件外观:
下面的示例将调整平移缩放地图控件的外观。
var opts = {type: BMAP_NAVIGATION_CONTROL_SMALL}
map.addControl(new BMap.NavigationControl(opts));
自定义控件
百度地图 API允许您通过继承 Control来创建自定义地图控件。
要创建可用的自定义控件,您需要做以下工作:
定义一个自定义控件的构造函数。
设置自定义控件构造函数的 prototype属性为 Control的实例,以便继承控件基类。
实现 initialize()方法并提供 defaultAnchor和 defaultOffset属性。
定义构造函数并继承 Control
首先您需要定义自定义控件的构造函数,并在构造函数中提供 defaultAnchor 和 defaultOffset 两个属性,
以便 API 正确定位控件位置,接着让其继承于 Control。在下面的示例中我们定义一个名为 ZoomControl
的控件,每一次点击将地图放大两个级别。它具有文本标识,而不是平移缩放控件中使用的图形图标。
// 定义一个控件类,即 function
function ZoomControl(){
// 设置默认停靠位置和偏移量
this.defaultAnchor = BMAP_ANCHOR_TOP_LEFT;
this.defaultOffset = new BMap.Size(10, 10);
}
// 通过 JavaScript的 prototype属性继承于 BMap.Control
ZoomControl.prototype = new BMap.Control();
初始化自定义控件
当调用 map.addControl()方法添加自定义控件时,API会调用该对象的 initialize()方法用来初始化控件,您
需要实现此方法并在其中创建控件所需的 DOM元素,并添加 DOM事件。所有自定义控件中的 DOM元素
最终都应该添加到地图容器(即地图所在的 DOM 元素)中去,地图容器可以通过 map.getContainer()方
法获得。最后 initialize()方法需要返回控件容器的 DOM元素。
// 自定义控件必须实现 initialize方法,并且将控件的 DOM元素返回
// 在本方法中创建个 div元素作为控件的容器,并将其添加到地图容器中
ZoomControl.prototype.initialize = function(map){
// 创建一个 DOM元素
var div = document.createElement("div");
// 添加文字说明
div.appendChild(document.createTextNode("放大2级"));
// 设置样式
div.style.cursor = "pointer";
div.style.border = "1px solid gray";
div.style.backgroundColor = "white";
// 绑定事件,点击一次放大两级
div.onclick = function(e){
map.zoomTo(map.getZoom() + 2);
}
// 添加 DOM元素到地图中
map.getContainer().appendChild(div);
// 将 DOM元素返回
return div;
}
添加自定义控件
添加自定义控件与添加其他控件方法一致,调用 map.addControl()方法即可。
// 创建控件实例
var myZoomCtrl = new ZoomControl();
// 添加到地图当中
map.addControl(myZoomCtrl);
覆盖物
地图覆盖物概述
所有叠加或覆盖到地图的内容,我们统称为地图覆盖物。如标注、矢量图形元素(包括:折线和多边形和圆)、
信息窗口等。覆盖物拥有自己的地理坐标,当您拖动或缩放地图时,它们会相应的移动。
地图 API提供了如下几种覆盖物:
Overlay:覆盖物的抽象基类,所有的覆盖物均继承此类的方法。
Marker:标注表示地图上的点,可自定义标注的图标。
Label:表示地图上的文本标注,您可以自定义标注的文本内容。
Polyline:表示地图上的折线。
Polygon:表示地图上的多边形。多边形类似于闭合的折线,另外您也可以为其添加填充颜色。
Circle: 表示地图上的圆。