开发 地图 JS API 2.0 入门教程 添加地图控件

添加地图控件 最后更新时间: 2023年11月27日

本文介绍地图控件的使用,同时对于插件的使用也可以参照本文。

JS API 提供了众多的控件,需要引入之后才能使用这些控件的功能。

缩放控件 AMap.ToolBar

地图的放大和缩小

比例尺控件 AMap.Scale

显示当前地图的比例尺

控制罗盘控件 AMap.ControlBar

控制地图旋转和倾斜

定位控件AMap.Geolocation

提供定位功能

鹰眼控件 AMap.HawkEye

地图缩略图,标记当前展示区域

图层切换控件 AMap.MapType

切换不同的地图类型

提示

地图控件属于插件,是用来增强地图交互体验和功能的元素,可以在地图上显示各种操作按钮:比例尺、图层切换等,以方便用户进行地图操作和信息展示,更多插件前往 插件列表

地图控件示例

1、实现步骤

常见的地图控件有:缩放工具条ToolBar、比例尺Scale、定位按钮 Geolocation等。

1

1.1 准备

成为开发者并创建 key

为了正常调用 API ,请先注册成为高德开放平台开发者,并申请 web 平台(JS API)的 key 和安全密钥,点击 具体操作

提示

你在2021年12月02日以后申请的 key 需要配合你的安全密钥一起使用。

2

1.2 创建地图

const map = new AMap.Map('container', {
  zoom:11, //地图级别
  center: [116.397428, 39.90923] //地图中心点
});
3

1.3 引入地图控件

推荐异步加载方式,在需要的地方引入。通过AMap.plugin方法按需引入控件,在plugin回调之后使用控件功能。

//异步加载控件
AMap.plugin('AMap.ToolBar',function(){ 
  var toolbar = new AMap.ToolBar(); //缩放工具条实例化
  map.addControl(toolbar);
});
提示

本示例为工具条的创建,创建其他控件同理,获取更多控件如:比例尺、鹰眼、定位等,更多功能前往 插件列表关于控件引入方式的更多信息可以前往 插件的使用

4

1.4 控制地图控件

对于不同的控件或者说插件都有对应的实例的方法,控件被实例化后可以调用相应的方法来控制控件。

toolbar.show(); //缩放工具展示
toolbar.hide(); //缩放工具隐藏
返回顶部 示例中心 常见问题 智能客服 公众号
二维码