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

添加地图控件 最后更新时间: 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(); // 缩放工具隐藏

示例
中心
常见
问题
智能
客服