html显示于左侧中部,基础控件-地图控件-参考手册-AMapUI 组件库 | 高德地图API

BasicControl(基础控件)提供一些基础的地图控件，目前包括：缩放控件(BasicControl.Zoom)，图层切换控件(BasicControl.LayerSwitcher)，交通图控件(BasicControl.Traffic)。

如何使用

1、引入UI组件库

2、BasicControl依赖jQuery或者Zepto，请参见这里确定是否需要进行DomLibrary设置。

3、加载BasicControl(模块名：ui/control/BasicControl)：

//设置DomLibrary，jQuery或者Zepto

AMapUI.setDomLibrary($);

//加载BasicControl，loadUI的路径参数为模块名中 'ui/' 之后的部分

AMapUI.loadUI(['control/BasicControl'], function(BasicControl) {

var map = new AMap.Map('container');

//缩放控件

map.addControl(new BasicControl.Zoom({

position: 'lt', //left top，左上角

showZoomNum: true //显示zoom值

}));

//图层切换控件

map.addControl(new BasicControl.LayerSwitcher({

position: 'rt' //right top，右上角

}));

//实时交通控件

map.addControl(new BasicControl.Traffic({

position: 'lb'//left bottom, 左下角

}));

});

控件类通用接口

BasicControl中的控件继承自统一的父类，因此具备一些通用的构造参数，方法和事件。

构造参数

参数名称类型说明

positionString|Object控件的位置，可以有如下取值：

1. 8个方位角：lt, left top, 左上角

lm，left middle, 左侧中部

lb，left bottom, 左下角

ct，center top, 中上

cb，center bottom, 中下

rt，right top, 右上角

rm，right middle, 右侧中部

rb，right bottom 右下角

2. 直接指定style的top,left,right,bottom，比如：

{

top:'20px',

right:'20px',

}

themeString主题样式。控件的dom容器上会附加名为： 'amap-ui-control-theme-' + theme 的class, 可以据此编写css来调整控件的样式。

方法

方法名称返回值说明

addTo(map)添加到map

removeFrom(map)从map上移除

事件

事件名称参数说明

willAddToMapmap控件即将被添加到map上

addToMapmap控件已被添加到map上

willRemoveFromMapmap控件即将从map上移除

removeFromMapmap控件已经从map上移除

BasicControl.Zoom接口

缩放控件(示例)

构造参数

构造参数类型说明

showZoomNumBoolean是否显示当前zoom值，默认false

themeString主题样式，内置light(默认)， dark两种，也可以配合css进行自定义设置

方法

方法返回值说明

zoomIn()放大

zoomOut()缩小

showZoomNum()显示zoom值

hideZoomNum()隐藏zoom值

BasicControl.LayerSwitcher接口

图层切换控件(示例)

构造参数

参数名称类型说明

baseLayersArray底图图层列表，每次只启用一个，图层信息的结构如下：

[

//第一个图层

{

id: 'tile',//图层id，需唯一

enable: true, //是否启用

name: '标准图',//显示名称，html

layer: new AMap.TileLayer() // 图层实例

},

//第二个图层

//{ ... }

]

overlayLayersArray覆盖物图层列表，可同时启用多个, 结构与baseLayers相同, 比如：

[

{

id: 'traffic',//图层id，需唯一

enable: true, //是否启用

name: '路况图',//显示名称，html

layer: new AMap.TileLayer.Traffic()//图层实例

},

//第二个图层

//{ ... }

]

themeString主题样式，内置light(默认)， dark两种，也可以配合css进行自定义设置

方法

方法名称返回值说明

getLayerInfoById(id:String)Object在baseLayers和overlayLayers中查找对应id的图层信息并返回

showLayersPanel()显示图层列表面板

hideLayersPanel()隐藏图层列表面板

事件

事件名称参数说明

layerPropChanged{layer:Object:,props:Object}某个图层的属性被改变，通常于图层显隐切换时触发

BasicControl.Traffic接口

交通图控件(示例)

构造参数

参数名称类型说明

openBoolean是否开启交通图，默认true

themeString按钮的样式，默认'normal',其他可选值有'normal-simple'、'dark'、'dark-simple'

autoRefreshBoolean是否自动刷新交通信息，默认true

intervalnumber刷新间隔，单位秒，默认30

showButtonBoolean是否显示切换按钮，默认true

方法

方法名称返回值说明

open()开启交通图

close()关闭交通图

showButton()显示切换按钮

hideButton()隐藏切换按钮