插件的使用 最后更新时间: 2023年12月04日
JS API 提供了众多的插件，需要引入之后才能使用这些插件的功能。
这些功能包括但不限于：
1、插件的使用流程
1
1.1 准备
成为开发者并创建 key
为了正常调用 API ，请先注册成为高德开放平台开发者，并申请 web 平台（JS API）的 key 和安全密钥，点击 具体操作。
提示
你在2021年12月02日以后申请的 key 需要配合你的安全密钥一起使用。
2
1.2 创建地图
const map = new AMap.Map("container", {
zoom: 10, //地图级别
center: [116.397428, 39.90923], //地图中心点
mapStyle: "amap://styles/whitesmoke", //设置地图的显示样式
viewMode: "2D", //设置地图模式
});3
1.3 引入插件
此示例为异步加载插件，异步加载指的是在 JS API 加载完成之后，在需要使用到某个插件的时候，通过AMap.plugin方法按需引入插件，在plugin回调之后使用插件功能。
//异步加载工具条插件
AMap.plugin("AMap.ToolBar", function () {
//在回调函数中实例化插件，并使用插件功能
});4
1.4 创建插件实例
//在回调函数中实例化插件
var toolbar = new AMap.ToolBar(); //创建工具条插件实例
map.addControl(toolbar); //添加工具条插件到页面提示
非特殊情况需避免重复创建多个实例，复用同一个实例即可
5
1.5 调用实例的方法，使用相关功能
toolbar.hide() //设置工具条隐藏提示
toolbar.hide()方法为调用工具条隐藏的方法，对于不同的插件都有对应的实例的方法，插件被实例化后可以调用相应的方法来控制插件，更多插件介绍详见 插件列表。
2、插件加载方式
提示
引入插件，支持按需异步加载和同步加载，可同时引入多个插件。
2.1 异步加载多个插件
AMap.plugin的第一个参数使用数组即可同时加载引入多个插件。
AMap.plugin(["AMap.ToolBar", "AMap.Driving"], function () { //异步同时加载多个插件
var toolbar = new AMap.ToolBar(); //创建工具条插件实例
map.addControl(toolbar); //添加工具条插件到页面
var driving = new AMap.Driving(); //创建驾车路线规划实例
driving.search(/*参数*/); //调用插件实例上的方法
});2.2 AMapLoader.load 方法异步加载多个插件
使用<script>标签加载 loader.js，在AMapLoader.load()的plugins参数数组中引入多个插件
<script src="https://webapi.amap.com/loader.js"></script>
<script type="text/javascript">
AMapLoader.load({
key: "「你申请的应用 Key」", //申请好的 Web 端开发者 Key，调用 load 时必填
version: "2.0", //指定要加载的 JS API 的版本，缺省时默认为 1.4.15
plugins: ["AMap.ToolBar", "AMap.Scale"], //需要使用的的插件列表
}).then((AMap) => {
const map = new AMap.Map("container"); //创建地图实例
var toolbar = new AMap.ToolBar(); //创建工具条插件实例
map.addControl(toolbar); //添加工具条插件到页面
var scale = new AMap.Scale();
map.addControl(scale);
});
</script>2.3 同步预加载插件
如果你希望和 JS API 的主体同步加载某些插件，而不是异步加载，可以在 JS API 的<script>加载地址中添加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" >
var map = new AMap.Map('mapContainer',{
zoom:12,
center:[116.39,39.9]
});
var toolbar = new AMap.ToolBar();
map.addControl(toolbar);
</script>2.4 同步预加载多个插件
需要加载多个插件时，plugin参数中的插件名称之间以英文逗号,分割。
<script type="text/javascript" src="https://webapi.amap.com/maps?v=2.0&key=你申请的key值&plugin=AMap.ToolBar,AMap.Driving"></script>
<script type="text/javascript" >
var map = new AMap.Map('mapContainer',{
zoom:12,
center:[116.39,39.9]
});
var toolbar = new AMap.ToolBar();
map.addControl(toolbar);
var driving = new AMap.Driving();
driving.search(/*参数*/)
</script>