H5新特性百度地图SDK--API引入、地图控件、地理编码与逆地理编码、地图标注、路径规划（基于2.0）

 1.1 大致流程

打开，百度地图官网

登录或者注册一个百度账号，并完成相关验证

登陆并申请成为开发者

在百度地图开发平台的首页选择控制台，在控制台中创建应用

 创建好应用以后就能在控制台我的应用中看到这个应用，其中最重要的是AK，这是百度地图分配给我们应用的一个专用的秘钥，必须使用秘钥才能访问百度地图API

完成以上基础操作后，具体的操作流程请参考：jspopularGL | 百度地图API SDK

1.2 基本用法

2.1 系统控件

//平移控件

map.addControl(new BMap.NavigationControl());

//缩放控件

map.addControl(new BMap.ScaleControl());

//缩略地图控件

map.addControl(new BMap.OverviewMapControl());

//地图类型控件

map.addControl(new BMap.MapTypeControl());

map.addControl(new BMap.CityListControl());

示例：

2.2 自定义摆放的系统控件的位置

自定义摆放位置有三个字段可选

anchor  :控件摆放位置

• BMAP_ANCHOR_TOP_LEFT：表示控件定位于地图的左上角
• BMAP_ANCHOR_TOP_RIGHT：表示控件定位于地图的右上角
• BMAP_ANCHOR_BOTTOM_LEFT：表示控件定位于地图的左下角
• BMAP_ANCHOR_BOTTOM_RIGHT：表示控件定位于地图的右下角

offset  ：控件偏移位置

除了指定停靠位置外，还可以通过偏移量来指示控件距离地图边界有多少像素

如果两个控件的停靠位置相同，那么控件可能会重叠在一起，这时就可以通过偏移值使二者分开显示。

type    ：控件加载类型

• BMAP_NAVIGATION_CONTROL_LARGE    表示显示完整的平移控件
• BMAP_NAVIGATION_CONTROL_ALL    表示显示小型的平移缩放控件
• BMAP_NAVIGATION_CONTROL_PAN         表示只显示控件的部分平移功能
• BMAP_NAVIGATION_CONTROL_ZOOM      表示只显示控件的部分缩放功能

var options={

             anchor:BMAP_ANCHOR_BOTTOM_RIGHT,

             offset:new BMap.Size(150, 5),

             type:BMAP_NAVIGATION_CONTROL_ALL

             };

             map.addControl(new BMap.NavigationControl(options));

             //比例尺位置

            var options={

                anchor:BMAP_ANCHOR_TOP_LEFT,

                offset:new BMap.Size(75,15)

            };

map.addControl(new BMap.ScaleControl(options));

示例：

2.3 自定义控件

2.3.1 流程

1.定义一个自定义控件的构造函数并继承Control

自定义构造函数中要提供defaultAnchor和defaultOffset两个属性，以便API正确定位控件位置，接着让其继承于Control。

2.初始化自定义控件

设置自定义控件构造函数的prototype属性为Control的实例，以便继承控件基类；当调用map.addControl()添加自定义控件时，API会调用该对象的initialize()方法用来初始化控件，你需要实现此方法并在其中创建控件所需的DOM元素，并添加DOM事件；所有自定义控件中的DOM元素最终都应该添加到地图容器（也就是地图所在的DOM元素）中去，地图容器可以通过map.getContainer()方法获得；最后initialize()方法需要返回控件容器的DOM元素

3.添加自定义控件

使用map.addControl();方法

示例：

 更多详细内容请参考官方文档：https://lbs.baidu.com/index.php?title=jspopularGL/guide/

地址解析服务提供从地址转换到经纬度的服务，反之，逆地址解析则提供从经纬度坐标转换到地址的转换功能

提供的转换类：

Geocoder：逆/地址解析，用于坐标与地址间的相互转换

3.1 地址解析服务

根据地址描述获得坐标信息：

百度地图API提供Geocoder类进行地址解析，可以通过Geocoder.getPoint()方法来将一段地址描述转换为一个坐标

注意：在调用Geocoder.getPoint()方法时您需要提供地址解析所在的城市（本例为“北京市”）。

示例：

逆地址解析服务：

根据坐标点获得该地点的地址描述，是地址解析的逆向转换

可以通过Geocoder.getLocation()方法获得地址描述

当解析工作完成后，您提供的回调函数将会被触发

如果解析成功，则回调函数的参数为GeocoderResult对象，否则为null

指定经纬度获取地址

鼠标点击地图获取地址

示例：

 所有叠加或覆盖到地图的内容，我们统称为地图覆盖物。覆盖物拥有自己的地理坐标，当您拖动或缩放地图时，它们会相应的移动。

覆盖物主要分为：标注（点标注、折线、多边形、圆、文本标注）、信息窗口、图层。

提供的文本标注

Label：一个用来往地图上添加文本标注的类，可以自定义标注的文本内容

4.1 提供覆盖物

可以使用map.addOverlay方法向地图添加覆盖物，使用map.removeOverlay方法移除覆盖物，注意此方法不适用于InfoWindow

4.2 添加文本标注

API提供了默认的标注样式，您也可以通过setStyle来指定自定义样式。

1.向地图中添加标注

2.定义标注图标

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

3.监听标注事件

JSAPI支持监听覆盖物的事件。

4.可拖拽的标注

marker的enableDragging和disableDragging方法可用来开启和关闭标注的拖拽功能。默认情况下标注不支持拖拽，您需要调用marker.enableDragging()方法来开启拖拽功能。在标注开启拖拽功能后，您可以监听标注的dragend事件来捕获拖拽后标注的最新位置

4.3 标注折线

Polyline表示地图上的折线覆盖物。它包含一组点，并将这些点连接起来形成折线

添加折线：

折线在地图上绘制为一系列直线段。可以自定义这些线段的颜色、粗细和透明度。颜色可以是十六进制数字形式（比如：#ff0000）或者是颜色关键字（比如：red）。

Polyline的绘制需要浏览器支持矢量绘制功能。在Internet Explorer中，地图使用VML绘制折线；在其他浏览器中使用SVG或者Canvas。

以下代码段会在两点之间创建6像素宽的蓝色折线：

示例1：默认标注/系统标注

 示例2：自定义标注点

示例3：marker标注的点击事件

更多详细信息请参考官方文档：jspopular | 百度地图API SDK

 提供的出行方式包括公交、驾车、步行

开发者可以使用我们提供的默认展示效果，也可通过结果面板或数据接口获取返回结果，自己编写实现界面。图片支持自定义。

5.1 提供的路线规划方式

5.2 驾车路线规划

BMap.DrivingRoute提供驾车导航服务

与公交导航不同的是，驾车导航的搜索范围可以设置为省

1.使用服务示例

2.结果面板

方案描述会自动展示到页面上

3.数据接口

驾车导航服务也提供了丰富的数据接口，通过onSearchComplete回调函数可以得到BMap.DrivingRouteResult对象，它包含了驾车导航结果数据信息。

结果会包含若干驾车方案（目前仅提供一条方案），每条方案中包含了若干驾车线路（如果导航方案只包含一个目的地，那么驾车线路的个数就为1，如果方案包含若干个目的地，则驾车线路的个数会大于1

目前API尚不支持多个目的地的驾车导航）。

每条驾车线路又会包含一系列的关键步骤（BMap.Step），关键步骤描述了具体驾车行驶方案，可通过BMap.Step.getDescription()方法获得。

5.3 公交路线规划

BMap.TransitRoute类提供公交导航搜索服务

在搜索之前需要指定搜索区域。注意：公交导航的区域范围只能是市，而不能是省

如果搜索区域为BMap.Map对象，路线结果会自动添加到地图上。如果您提供了结果容器，相应的路线描述也会展示在页面上

1.使用服务示例

2.结果面板

可以提供用于展示文字结果的容器元素，方案结果会自动在页面中展现：

3.数据接口

可通过数据接口获取详细的公交方案信息

公交导航搜索结果用BMap.TransitRouteResult来表示，其中包含了若干公交出行方案（BMap.TransitRoutePlan）

每条出行方案由步行线路和公交线路组成。 在起点到上车点之间、下车点到终点之间以及每个换乘站之间都会存在步行线路，如果上述的某两点位置重合，那么其间的步行路线长度为0

如下示例，通过数据接口将第一条方案的路线添加到地图上，并将所有方案的描述信息输出到页面上

5.4步行路线规划

BMap.WalkingRoute提供步行线路规划服务

基本用法和驾车线路规划类似

1.使用服务示例

示例：

 更多详细信息请参考官方文档：jspopular | 百度地图API SDK

综合：