插件的使用 最后更新时间: 2023年12月04日

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

这些功能包括但不限于:

1、插件的使用流程

const map = new AMap.Map("container", {
 zoom: 10, //地图级别
 center: [116.397428, 39.90923], //地图中心点
 mapStyle: "amap://styles/whitesmoke", //设置地图的显示样式
 viewMode: "2D", //设置地图模式
});

//异步加载工具条插件
AMap.plugin("AMap.ToolBar", function () {
 //在回调函数中实例化插件,并使用插件功能
});

//在回调函数中实例化插件
var toolbar = new AMap.ToolBar(); //创建工具条插件实例
map.addControl(toolbar); //添加工具条插件到页面

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>