logo资料库

百度地图 Baidu Map API中文开发文档.pdf

第1页 / 共27页
第2页 / 共27页
第3页 / 共27页
第4页 / 共27页
第5页 / 共27页
第6页 / 共27页
第7页 / 共27页
第8页 / 共27页
资料共27页,剩余部分请下载后查看
百度地图 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
分享到:
收藏