地图百度地图API应用实例说明文档

百度地图API

百度地图API应用实例

Michael Tian

资料内容仅供您学习参考如有不当或者侵权请联系改正或者删除。

目录

百度地图API. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .2

1基础知识. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .2

2应用示例. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .9

3折线. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .19

4自定义标注. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .23

5文本标注. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .24

6参考资料. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .30

百度地图API

1基础知识

1 . 1百度地图API概念

百度地图API是一套由JavaScript语言编写的应用程序接口,它能够帮助您

资料内容仅供您学习参考如有不当或者侵权请联系改正或者删除。

在网站中构建功能丰富、 交互性强的地图应用程序。

百度地图API不但包含构建地图的基本功能接口,还提供了诸如本地搜索、路线规划等数据服务。

1 .2百度地图的”Hel lo,World”

开始学习百度地图API最简单的方式是看一个简单的示例。以下代码创立了一个520x340大小的地图区域并以天安门作为地图的中心:

资料内容仅供您学习参考如有不当或者侵权请联系改正或者删除。

您能够查看此示例及下载、 编辑和调试该示例。

程序运行结果:

资料内容仅供您学习参考如有不当或者侵权请联系改正或者删除。

即使在此简单的示例中,也需要注意五点:

1 .使用script标签包含百度地图API JavaScript。

2. 创立名为”container”的div元素来包含地图。

3.编写JavaScript函数创立”map”对象。

4.将地图的中心设置为指定的地理点。

5. 在</html>标签外面开始初始化地图对象并确保container div元素已经存在。

资料内容仅供您学习参考如有不当或者侵权请联系改正或者删除。

1 .2. 1 引用百度地图API文件

经过地址:

其中参数key为密钥,您能够在这里申请密钥。参数v为当前API的版本号,当前最新版本为1 .0,services参数表示是否加载服务部分, true表示加载, false表示不加载。地址,例如当前API的最新版本为1 .0。

1 .2.2创立地图容器元素

<div style="width:520px;height:340px;border:1px sol id#000" id="Div1"></div>地图需要一个HTML元素作为容器,这样才能展现到页面上。这里我们创立了一个div元素并制定它的大小。地图会根据容器大小调整自身尺寸。

1 .2.3命名空间

API使用BMap作为命名空间,所有类均在该命名空间之下,比如:

BMap.Map、 BMap.Control、 BMap.Overlay。

1 .2.4创立地图实例

资料内容仅供您学习参考如有不当或者侵权请联系改正或者删除。

位于BMap命名空间下的Map类表示地图,经过new操作符能够创立一个地图实例。其参数能够是元素id也能够是元素对象。

注意在调用此构造函数时应确保容器元素已经添加到地图上。

请注意因为JavaScript是松散类型的语言,我们能够不填写构造函数的任何可选参数。

1 .2.5创立点坐标

这里我们使用BMap命名空间下的Point类来创立一个坐标点。 Point类描述了一个地理坐标点,其中1 16.404表示经度,39.915表示纬度。

1 .2.6初始化地图

资料内容仅供您学习参考如有不当或者侵权请联系改正或者删除。

在创立地图实例后,我们需要对其进行初始化,BMap.Map.centerAndZoom()方法要求设置中心点坐标和地图级别。

地图必须经过初始化才能够执行其它操作。

1 .2.7地图操作

地图被实例化并完成初始化以后,就能够与其进行交互了。API中的地图对象的外观与行为与百度地图网站上交互的地图非常相似。它支持鼠标拖拽、 滚轮缩放、 双击放大等交互功能。您也能够修改配置来改变这些功能。

您还能够经过编程的方式与地图交互。 Map类提供了若干修改地图状态的方法。例如:setCenter()、 panTo()、 zoomTo()等等。

下面示例显示一个地图,等待两秒钟后,它会移动到新中心点。 panTo()方法将让地图平滑移动至新中心点,如果移动距离超过了当前地图区域大小,则地图会直跳到该点。

资料内容仅供您学习参考如有不当或者侵权请联系改正或者删除。

本节完整参考代码:

2应用示例

本章节介绍一些地图的基本应用和部分AP I的使用。示例代码会结合ExtJS一起展示,因为ExtJ S不是本文主要介绍的技术,因此在这里不做过多的讲解,如果想了解详情,请”百度”ExtJS。

本文中所写的代码均为示例代码,不能保证程序的正常运行,如需完全代码,请参见每章节结束部分的”本节完整参考代码”。

本文不会详细介绍百度API类与Ext类的具体使用方法,如果需要了解,请参考相关的参考资料。

2. 1 Map类

此类是地图API的核心类,用来实例化一个地图。