添加地图控件 最后更新时间: 2023年03月27日
JS API 提供了众多的插件功能，这些功能不会主动随着 JS API 主体资源下发，需要引入之后才能使用这些插件的功能。地图控件也属于插件，是可以控制地图状态的插件。
本章将介绍地图控件的使用，同时对于插件的时候也可以参照本章。
准备
成为开发者并创建 key
为了正常调用 API ，请先注册成为高德开放平台开发者，并申请 web 平台（JS API）的 key 和安全密钥，点击 具体操作。
添加地图控件
常见的地图控件有：缩放工具条 ToolBar、比例尺 Scale、定位按钮 Geolocation等。
1
创建地图
const map = new AMap.Map('container', {
zoom:11, //初始化地图层级
center: [116.397428, 39.90923] //初始化地图中心点
});2
引入地图控件
推荐异步加载方式，在需要的地方引入。通过AMap.plugin方法按需引入插件，在plugin回调之后使用插件功能。
let toolbar;
AMap.plugin('AMap.ToolBar',function(){ // 异步加载插件
toolbar = new AMap.ToolBar(); // 缩放工具条实例化
map.addControl(toolbar);
});提示
异步加载多个插件
AMap.plugin(['AMap.ToolBar','AMap.Scale'],function(){});//异步同时加载多个插件同步加载方式：在 JS API 的入口地址中添加plugin参数，将需要使用的一个或者多个插件的名称作为参数即可，这种用法在 JS API 加载完毕之后便可直接使用插件功能了。同样可以加载单个或者多个插件。
// 单个插件
<script type="text/javascript" src="https://webapi.amap.com/maps?v=2.0&key=您申请的key值&plugin=AMap.ToolBar"></script>
// 多个插件
<script type="text/javascript" src="https://webapi.amap.com/maps?v=2.0&key=您申请的key值&plugin=AMap.ToolBar,AMap.Driving"></script>3
控制地图控件
对于不同的控件或者说插件都有对应的实例的方法，插件被实例化后可以调用相应的方法来控制插件。
toolbar.show(); // 缩放工具展示
toolbar.hide(); // 缩放工具隐藏