百度地图添加控件

前言

百度地图默认是不带有任何控件的，只是简单的展示地图功能，如下图

而百度地图控件，则是在地图容器中集成一些稍微复杂的功能。百度地图官方的控件的解释如下：

控件是负责与地图交互的UI元素，百度地图API支持比例尺、缩放、定位、城市选择列表、版权，以及自定义控件。

类说明

百度地图所有的控件类继承与基类Control，Control是所有控件的基类，可以通过此类来实现自定义控件。所有控件均包含Control类的属性、方法和事件。
百度地图默认自带比例尺、缩放、定位、城市选择列表、版权这五种控件，往地图添加这五种控件时，不需要具体实现控件的业务逻辑，直接添加即可。

控件	类名	简介
抽象基类	Control	所有控件均继承此类的方法、属性。通过此类您可实现自定义控件
比例尺	ScaleControl	默认位于地图左下方，显示地图的比例关系
缩放	ZoomControl	默认位于地图右下方，控制地图级别的缩放
定位	LocationControl	默认位于地图左下方，用于获取定位
城市选择列表	CityListControl	默认位于地图左上方，用于进行城市选择定位
版权	CopyrightControl	默认位于地图左下方，用于展示版权信息

添加控件

对于百度地图自带的五种控件，在地图初始化完成后，直接往地图添加即可。

const scaleCtrl = new BMapGL.ScaleControl();  // 添加比例尺控件
map.addControl(scaleCtrl);
const zoomCtrl = new BMapGL.ZoomControl();  // 添加缩放控件
map.addControl(zoomCtrl);
const cityCtrl = new BMapGL.CityListControl();  // 添加城市列表控件
map.addControl(cityCtrl);
// 其他两种控件添加方法类似
// ...

控制控件位置

初始化控件时，可提供一个可选参数，其中的anchor和offset属性共同控制控件在地图上的位置。 anchor表示控件的停靠位置，即控件停靠在地图的哪个角。当地图尺寸发生变化时，控件会根据停靠位置的不同来调整自己的位置。

下面以缩放控件为例，来说明一下对于控件位置的控制。
官网中对于缩放控件ZoomControl构造函数的定义如下：

构造函数	描述
ZoomControl(opts: ZoomControlOptions)	创建一个缩放控件

其中缩放控件参数ZoomControlOptions的描述如下：

属性	类型	描述
anchor	ControlAnchor	控件的停靠位置
offset	Size	控件的偏移值

ControlAnchor表示控件位置的常量，可选为以下四个值：

anchor值	位置说明
BMAP_ANCHOR_TOP_LEFT	表示控件定位于地图的左上角
BMAP_ANCHOR_TOP_RIGHT	表示控件定位于地图的右上角
BMAP_ANCHOR_BOTTOM_LEFT	表示控件定位于地图的左下角
BMAP_ANCHOR_BOTTOM_RIGHT	表示控件定位于地图的右下角

talk is cheap, show me the code.

初始化地图并添加缩放控件

	var map = new BMapGL.Map("allmap");    // 创建Map实例
	map.centerAndZoom(new BMapGL.Point(116.404, 39.915), 11);  // 初始化地图,设置中心点坐标和地图级别
    var zoomCtrl = new BMapGL.ZoomControl();  // 添加比例尺控件
    map.addControl(zoomCtrl);

地图初始化后实际效果如下图，可以看到缩放控件默认置于地图右下方：

控制缩放控件位置

缩放控件ZoomControl创建时，传递参数anchor即可控制控件显示位置。

    var map = new BMapGL.Map("allmap");
	map.centerAndZoom(new BMapGL.Point(116.404, 39.915), 11);
    var zoomCtrl = new BMapGL.ZoomControl({anchor: BMAP_ANCHOR_TOP_RIGHT });  // 添加比例尺控件，并将anchor属性设置为BMAP_ANCHOR_TOP_RIGHT，即右上方
    map.addControl(zoomCtrl);

可以看到缩放控件显示在了地图容器的右上方了。

控制缩放控件偏移

除了在控件ZoomControl创建时，传递参数anchor控制控件显示位置，还可以传递参数offset来控制偏移量。注意的是如果不设置offset参数，控件默认是带有一定的偏移的。偏移量是相对于地图容器四个角落进行偏移的。

    var map = new BMapGL.Map("allmap");
	map.centerAndZoom(new BMapGL.Point(116.404, 39.915), 11);
    var zoomCtrl = new BMapGL.ZoomControl(
      {
        anchor: BMAP_ANCHOR_TOP_RIGHT,
        offset: new BMapGL.Size(30, 40)  // offset设置为30，40，即相对于右上角左移30px，下移40px
      });
    map.addControl(zoomCtrl);

可以看到加了偏移offset参数之后，缩放控件相对于之前，有了明显的偏移。

上面已缩放控件ZoomControl为例讲解了百度地图自带控件的用法，其他几种自带控件的用法类似。