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

百度地图API

百度地图API应用实例

Michael Tian

目录

百度地图API (3)

1基础知识 (3)

1.1 百度地图 API 概念 (3)

1.2 百度地图的“Hello, World” (3)

1.2.1 引用百度地图API文件 (5)

1.2.2创建地图容器元素 (5)

1.2.3命名空间 (5)

1.2.4创建地图实例 (5)

1.2.5创建点坐标 (6)

1.2.6 初始化地图 (6)

1.2.7地图操作 (6)

2应用示例 (6)

2.1 Map类 (7)

2.2 ExtJs (7)

2.2.1 将百度地图嵌入到Ext中 (8)

2.2.2 在Ext中显示百度地图 (10)

2.3 向地图添加标注 (10)

2.4 为标注添加信息窗口 (11)

2.5 标注与数据列表的联动 (12)

2.6 数据列表与标注的联动 (12)

2.7 创建可拖拽的标注 (14)

3折线 (14)

3.1添加多边形 (14)

3.2样式设置 (16)

4自定义标注 (16)

5 文本标注 (17)

5.1 添加一个文本标注 (17)

5.2 文本位置偏移值 (18)

5.3 自定义Label (19)

5.4 添加滑动门效果 (20)

6参考资料 (21)

百度地图API

1基础知识

1.1 百度地图 API 概念

百度地图API是一套由JavaScript语言编写的应用程序接口，它能够帮助您在网站中构建功能丰富、交互性强的地图应用程序。

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

1.2 百度地图的“Hello, World”

开始学习百度地图API最简单的方式是看一个简单的示例。以下代码创建了一个520x340

您可以查看此示例及下载、编辑和调试该示例。程序运行结果：

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

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

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

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

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

5.在 标签外面开始初始化地图对象并确保container div元素已经存在。1.2.1 引用百度地图API文件

通过地址 https://www.doczj.com/doc/5814152810.html,/api 加载API：

其中参数key为密钥，您可以在这里申请密钥。参数v为当前API的版本号，目前最新版本为1.0，services参数表示是否加载服务部分，true表示加载，false表示不加载。地址

https://www.doczj.com/doc/5814152810.html,/api?v=1.0 中的参数v表示您加载API的版本，例如当前API的最新版本为1.0。

1.2.2创建地图容器元素

地图需要一个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类描述了一个地理坐标点，其中116.404表示经度，39.915表示纬度。

1.2.6 初始化地图

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

地图必须经过初始化才可以执行其他操作。

1.2.7地图操作

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

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

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

本节完整参考代码：

2应用示例

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

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

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

2.1 Map类

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

2.2 ExtJs

本示例使用的Ext类：

●Ext.Viewport：冲当整个浏览器的显示区域，并实现显示区域分割。在右边的区域嵌

入百度地图。

●Ext.grid.GridPanel ：装载标注信息列表。位置在页面的左边。

●Ext.data.Store：表格数据的存储器。

●Ext.grid.ColumnModel：表格的列信息。

●Ext.data.Record：数据记录集。与Store配合使用。

注：Ext的版本为3.2.0。

程序运行结果：

2.2.1 将百度地图嵌入到Ext 中

1.首先在页面的标签中引用百度API 与Ext 的三个必要文件。

2.在js中定义装载百度地图的DIV元素mapDiv。

3.添加数据列表GridPanel

4.在Ext.Viewport中嵌入mapDiv与数据列表GridPanel

2.2.2 在Ext中显示百度地图

1、添加加载地图的代码

2．调用initializeMap()方法

注：此处需要注意initializeMap()方法的位置，一定要写在new Ext.onReady方法体内，不然浏览器会无法将百度地图加载到mapDiv中，程序会出现异常。

2.3 向地图添加标注

通过鼠标左键点击地图，并在点击的坐标点上添加一个图像标注。

1.首先为地图添加一个click事件响应。为地图添加一个click事件监听，并取得当前点击的坐

2.获取标注的坐标值。通过参数e的point属性获得地理坐标点。其中e.point. lng可以获取经度值，e.point. lat可以获取纬度值。

3.将添加的标注坐标信息存入到GridPanel中。先创建一条record记录，然后通过store.add

息存入到浏览器的左边列表中。

2.4 为标注添加信息窗口

信息窗口在地图上方的浮动显示HTML内容。信息窗口可直接在地图上的任意位置打开，也可以在标注对象上打开（此时信息窗口的坐标与标注的坐标一致）。您可以使用

https://www.doczj.com/doc/5814152810.html,Window来创建一个信息窗实例，注意同一时刻地图上只能有一个信息窗口处于打开状态。

程序运行结果：

1.为标注添加click事件监听。创建信息窗口对象

3.使用标注打开信息窗口，并将地图的中心点设置该标准的坐标点。

2.5 标注与数据列表的联动

实现当点击某个标注时，其对应的数据列表的行会被选中。

程序运行结果：

2.6 数据列表与标注的联动

当选中数据列表中的某条记录时，将地图平移至该记录所对应的标注处，并且该标注会弹出信息窗口。

程序运行结果：

2.添加panelRowSelect函数。通过gird参数可以获取girdPaenl的record对象，再使用record

2.7 创建可拖拽的标注

标注是可以点击和拖动到新位置的交互式对象。

3折线

BMap.Polyline对象表示地图上的折线覆盖物。它包含一组点，并将这些点连接起来形成折线。折线在地图上绘制为一系列直线段。可以自定义这些线段的颜色、粗细和透明度。颜色可以是十六进制数字形式（比如：#ff0000）或者是颜色关键字（比如：red）。

BMap.Polyline对象需要浏览器支持矢量绘制功能。在Internet Explorer中，地图使用VML（请参阅VML）绘制折线；在其他浏览器中使用SVG（如果可用）。

3.1添加多边形

这里介绍使用Polyline类向地图添加多边形，使用Polyline绘制多边形的原理是向地图

添加N个坐标点，N >=3，把起点与终点设置为同一个点，然后将这些点连接起来，这样就可以绘制出一个多边形。

程序运行结果：

var map = new BMap.Map("container");

var point = new BMap.Point(116.4674377441400 , 39.7895443931116);

map.centerAndZoom(point, 10);

var polyline = new BMap.Polyline([

new BMap.Point( 116.3960266113280 , 40.0192013076867 ),

new BMap.Point( 116.4578247070310 , 40.0128907795261 ),

new BMap.Point( 116.5045166015620 , 39.9929035908019 ),

new BMap.Point( 116.5457153320310 , 39.9371189329902 ),

new BMap.Point( 116.5443420410150 , 39.9044690755304 ),

new BMap.Point( 116.5498352050780 , 39.8623172262438 ),

new BMap.Point( 116.5443420410150 , 39.8433404404499 ),

new BMap.Point( 116.5086364746090 , 39.8138105685145 ),

new BMap.Point( 116.4674377441400 , 39.7895443931116 ),

new BMap.Point( 116.4234924316400 , 39.7652696551221 ),

new BMap.Point( 116.3768005371090 , 39.7642140375156 ),

new BMap.Point( 116.3438415527340 , 39.7737140133473 ),

new BMap.Point( 116.2902832031250 , 39.7716030208971 ),

new BMap.Point( 116.2669372558590 , 39.8053711309438 ),

new BMap.Point( 116.2298583984370 , 39.8412315848450 ),

new BMap.Point( 116.2161254882810 , 39.8918262417255 ),

new BMap.Point( 116.2147521972650 , 39.9465950077389 ),

new BMap.Point( 116.2257385253900 , 39.9886950160466 ),

new BMap.Point( 116.2861633300780 , 40.0107871404655 ),

3.2样式设置

可以根据需要来修改折线的样式。

程序运行结果：

本节完整参考代码：

4自定义标注

通过BMap.Icon类可实现自定义标注的图标，下面示例通过参数BMap.MarkerOptions的icon属性进行设置，您也可以使用BMap.Marker.setIcon()方法。

参考代码如下：

var map = new BMap.Map("container");

var point = new BMap.Point(116.404, 39.915);

map.centerAndZoom(point, 15);

// 编写自定义函数，创建标注

function addMarker(point, index){

var myIcon = new BMap.Icon("https://www.doczj.com/doc/5814152810.html,/img/markers.png", new BMap.Size(23, 25), {

offset: new BMap.Size(10, 25), // 指定定位位置

imageOffset: new BMap.Size(0, 0 - index * 25) // 设置图片偏移

});

var marker = new BMap.Marker(point, {icon: myIcon});

map.addOverlay(marker);

}

// 随机向地图添加10个标注

var bounds = map.getBounds();

var lngSpan = bounds.maxX - bounds.minX;

var latSpan = bounds.maxY - bounds.minY;

for (var i = 0; i < 10; i ++) {

var point = new BMap.Point(bounds.minX + lngSpan * (Math.random() * 0.7 +

0.15),bounds.minY + latSpan * (Math.random() * 0.7 + 0.15));

addMarker(point, i);

}

5 文本标注

表示地图上的文本标注，可以自定义标注的文本内容。如果想给标注（Marker）添加文本与背景时，可以使用文本标注（Label）来替换标注（Marker）。

Label类的使用与Marker类似，也是通过addOverlay方法来添加。

5.1 添加一个文本标注

实例化一个Label对象，通过第一个参数指定Label的文本内容，第二个参数可以指定文本位置偏移值与文本标注的坐标点。普通情况下只指定文本内容与坐标点即可。

5.2 文本位置偏移值

上文提到了文本位置偏移值，它的作用就是改变Label的文本位置，为了更好的体现文本位置的变化，先给地图添加一个Marker用来做对比，Marker的坐标点跟Label的坐标点相同。

程序运行结果：

从图片可以看出来，不加文本位置偏移值的情况下，Label的坐标点是它的左上角。

添加文本位置偏移值的效果图：

对比以上两幅图片，查看Label位置的差别，就可以了解文本位置偏移值的作用，可以根据需要来自行决定是否实用文本位置偏移值。

5.3 自定义Label

本节介绍如何给Label添加特效文本与背景图。

参考下图：

重点的代码讲解：

https://www.doczj.com/doc/5814152810.html,bel4.setStyle方法：设置文本标注样式，该样式将作用于文本标注的容器元素上。

label4.setStyle({position:'absolute',border:'none',background:'none',zIndex:'1 '});这段代码主要就是去掉label的边框，如果不写的话，那么label会有一个红色的边框。

https://www.doczj.com/doc/5814152810.html,bel4.setContent：设置文本标注的内容。支持HTML。

label4.setContent(ct);利用label支持HTML元素的特点，定义一个DIV，将其赋给label，达到自定义文字与背景的目的。

3.setOffset(offset:Size) ：通过此方法来设置文本标注的偏移值。

4.css中的 background-position 属性，通过它来实现图片的截取。这种技术已经被广泛使

用。很多网站都是将很多图标、图片整合到一个图片文件中，然后通过这个属性来进行选择性的截取。在这里就不详细说明了。

5.4 添加滑动门效果

本节介绍如何给Label添加滑动门效果。

1.为Label的div添加一个。

2.给Label添加mouseover、mouseout事件监听。

注：滑动门技术是网页中经常用到的，这里不做原理介绍。