地图控件最后更新时间: 2021年01月22日

在线插件是在基础地图服务上增加的额外功能，您可以根据自己的需要选择添加。插件分为两类：一类是地图控件，它们是用户与地图交互的UI元素，例如缩放控制条（ToolBar）等；一类是功能型插件，用来完成某些特定地图功能，比如鼠标工具（MouseTool）等。

控件名称	说明	是否插件
AMap.ControlBar	组合了旋转、倾斜、复位、缩放在内的地图控件，在3D地图模式下会显示（自V1.4.0版本新增）	是
AMap.MapType	地图类型切换插件，用来切换固定的几个常用图层	是
AMap.OverView	地图鹰眼插件，默认在地图右下角显示缩略图	是
AMap.Scale	地图比例尺插件	是
AMap.ToolBar	地图工具条插件，可以用来控制地图的缩放和平移	是

AMap.ControlBar 插件

组合了旋转、倾斜、复位、缩放在内的地图控件，自V1.4.0版本新增。

构造方式：

new AMap.ControlBar(ControlBarOptions)

使用方法：

JavaScript

var mapObj = new AMap.Map("container",{
    center:new AMap.LngLat(116.368904,39.913423),
    zoom:16
});
mapObj.plugin(["AMap.ControlBar"],function(){
    var controlBar = new AMap.ControlBar(Options)
    map.addControl(controlBar)
});
//map.reoveControl(controlBar)

ControlBarOptions	类型	说明
`position`	`Object`	控制显示位置，如{top:’10px’,right:’10px’}
`showZoomBar`	`Boolean`	是否显示缩放按钮。移动端默认为false，PC端为默认为true
`showControlButton`	`Boolean`	是否显示倾斜、旋转按钮。移动端默认为false，PC端为默认为true

AMap.MapType 插件

地图类型切换插件。用户通过该插件进行地图切换。

代码示例

JavaScript

mapObj = new AMap.Map("imap",{
    center:new AMap.LngLat(116.368904,39.913423),
    zoom:16
});
mapObj.plugin(["AMap.MapType"],function(){
    //地图类型切换
    var type= new AMap.MapType({
    defaultType:0 //使用2D地图
    });
    mapObj.addControl(type);
});

构造函数	说明
`AMap.MapType(MaptypeOptions)`	地图类型切换插件，用于切换设定好的几个常用地图图层。

MaptypeOptions	类型	说明
`defaultType`	`Number`	初始化默认图层类型。取值为0：默认底图取值为1：卫星图默认值：0
`showTraffic`	`Boolean`	叠加实时交通图层默认值：false
`showRoad`	`Boolean`	叠加路网图层默认值：false

方法	返回值	说明
`show( )`		显示地图类型切换控件
`hide( )`		隐藏地图类型切换控件

AMap.OverView 插件

地图鹰眼插件。

代码示例

JavaScript

//加载鹰眼
mapObj.plugin(["AMap.OverView"],function(){
    view = new AMap.OverView();
    mapObj.addControl(view);
});

构造函数	说明
`AMap.OverView(` `OverViewOptions` `)`

OverViewOptions	类型	说明
`tileLayer`	`TileLayer`	鹰眼窗体中需显示的切片图层
`isOpen`	`Boolean`	鹰眼是否展开，默认为false
`visible`	`Boolean`	鹰眼是否显示，默认为true

方法	返回值	说明
`show( )`		显示鹰眼窗体
`hide( )`		隐藏鹰眼窗体
`open( )`		展开鹰眼窗口
`close( )`		折叠鹰眼窗口
`setTileLayer(TileLayer)`		设置鹰眼中需显示的切片图层
`getTileLayer( )`	`TileLayer`	获取窗体中显示的切片图层

事件	参数	说明
`show`		执行显示鹰眼窗体时触发的事件
`hide`		执行隐藏鹰眼窗体时触发的事件
`open`		执行展开鹰眼窗体时触发的事件
`close`		执行折叠鹰眼窗体时触发的事件

AMap.Scale 插件

比例尺插件。位于地图右下角，用户可控制其显示与隐藏。

代码示例

JavaScript

mapObj.plugin(["AMap.Scale"],function(){
    var scale = new AMap.Scale();
    mapObj.addControl(scale);   
});

构造函数	说明
`AMap.Scale( )`

方法	返回值	说明
`show( )`		显示比例尺
`hide( )`		隐藏比例尺
`offset`	`Pixel`	相对于地图容器左上角的偏移量，正数代表向右下偏移。默认为AMap.Pixel(10,10)
`position`	`String`	控件停靠位置 LT:左上角; RT:右上角; LB:左下角; RB:右下角; 默认位置：LB

事件	参数	说明
`show`		显示比例尺插件时触发的事件
`hide`		隐藏比例尺插件时触发的事件

AMap.ToolBar 插件

地图操作工具条插件。可支持方向导航、位置定位、视野级别缩放、视野级别选择等操作。

代码示例

JavaScript

mapObj.plugin(["AMap.ToolBar"],function(){
    //加载工具条
    var tool = new AMap.ToolBar();
    mapObj.addControl(tool);    
});

相关示例

构造函数	说明
`AMap.ToolBar(` `ToolbarOptions` `)`	地图操作工具条，有放大缩小功能，地图左右平移功能，定位功能

ToolbarOptions	类型	说明
`offset`	`Pixel`	相对于地图容器左上角的偏移量，正数代表向右下偏移。默认为AMap.Pixel(10,10)
`position`	`String`	控件停靠位置 LT:左上角; RT:右上角; LB:左下角; RB:右下角; 默认位置：LT
`ruler`	`Boolean`	标尺键盘是否可见，默认为true
`noIpLocate`	`Boolean`	定位失败后，是否开启IP定位，默认为false
`locate`	`Boolean`	是否显示定位按钮，默认为false
`liteStyle`	`Boolean`	是否使用精简模式，默认为false
`direction`	`Boolean`	方向键盘是否可见，默认为true
`autoPosition`	`Boolean`	是否自动定位，即地图初始化加载完成后，是否自动定位的用户所在地，仅在支持HTML5的浏览器中有效，默认为false
`locationMarker`	`Marker`	自定义定位图标，值为Marker对象
`useNative`	`Boolean`	是否使用高德定位sdk用来辅助优化定位效果，默认：false. 仅供在使用了高德定位sdk的APP中，嵌入webview页面时使用注：如果要使用辅助定位的功能，除了需要将useNative属性设置为true以外，还需要调用高德定位idk中，AMapLocationClient类的startAssistantLocation()方法开启辅助H5定位功能；不用时，可以调用stopAssistantLocation()方法停止辅助H5定位功能。具体用法可参考定位SDK的参考手册

方法	返回值	说明
`getOffset( )`	`Pixel`	获取工具条相对于地图容器左上角的偏移量
`setOffset(Pixel` `)`		设置工具条相对于地图容器左上角的偏移量
`hideRuler( )`		隐藏缩放级别等级条
`showRuler( )`		显示缩放级别等级条
`hideDirection( )`		隐藏方向键盘
`showDirection( )`		显示方向键盘
`hideLocation( )`		隐藏定位小部件
`showLocation( )`		显示定位小部件
`doLocation( )`		进行位置定位，浏览器须支持html5，且用户须同意共享位置信息。结果位置信息通过location事件函数获取
`getLocation( )`	`LngLat`	获取上次定位的结果(lng、lat)。执行该功能的前须进行位置定位：doLocation，且定位事件已经执行完毕
`hide( )`		隐藏工具条
`show( )`		显示工具条

事件	参数	说明
`show`		工具条显示时触发此事件
`hide`		工具条隐藏时触发此事件
`location`	`{type,lnglat}`	使用ToolBar定位按钮或doLocation函数进行定位，定位完成时触发此事件，浏览器须支持html5 type: 事件类型 lnglat: 定位结果坐标值
`zoomchanged`	`{type}`	使用工具条缩放地图时触发此事件 type：事件类型放大地图时，type值为zoomin；缩小地图时，type值为zoomout

地图控件 最后更新时间: 2021年01月22日

AMap.ControlBar 插件

AMap.MapType 插件

代码示例

AMap.OverView 插件

代码示例

AMap.Scale 插件

代码示例

AMap.ToolBar 插件

代码示例

地图控件最后更新时间: 2021年01月22日