百度地图控件,则是在地图容器中集成一些稍微复杂的功能。百度地图官方的控件的解释如下:
控件是负责与地图交互的UI元素,百度地图API支持比例尺、缩放、定位、城市选择列表、版权,以及自定义控件。
百度地图所有的控件类继承与基类Control,Control是所有控件的基类,可以通过此类来实现自定义控件。所有控件均包含Control类的属性、方法和事件。
百度地图默认自带比例尺、缩放、定位、城市选择列表、版权这五种控件,往地图添加这五种控件时,不需要具体实现控件的业务逻辑,直接添加即可。
控件
类名
简介
抽象基类
Control
所有控件均继承此类的方法、属性。通过此类您可实现自定义控件
比例尺
ScaleControl
默认位于地图左下方,显示地图的比例关系
缩放
ZoomControl
默认位于地图右下方,控制地图级别的缩放
定位
LocationControl
默认位于地图左下方,用于获取定位
城市选择列表
CityListControl
默认位于地图左上方,用于进行城市选择定位
版权
CopyrightControl
默认位于地图左下方,用于展示版权信息
对于百度地图自带的五种控件,在地图初始化完成后,直接往地图添加即可。
初始化控件时,可提供一个可选参数,其中的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
表示控件定位于地图的右下角
初始化地图并添加缩放控件
地图初始化后实际效果如下图,可以看到缩放控件默认置于地图右下方:
缩放控件ZoomControl创建时,传递参数anchor即可控制控件显示位置。
可以看到缩放控件显示在了地图容器的右上方了。
除了在控件ZoomControl创建时,传递参数anchor控制控件显示位置,还可以传递参数offset来控制偏移量。注意的是如果不设置offset参数,控件默认是带有一定的偏移的。偏移量是相对于地图容器四个角落进行偏移的。
可以看到加了偏移offset参数之后,缩放控件相对于之前,有了明显的偏移。
上面已缩放控件ZoomControl为例讲解了百度地图自带控件的用法,其他几种自带控件的用法类似。
评论留言