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

JS API 提供了众多的插件功能，这些功能不会主动随着 JS API 主体资源下发，需要引入之后才能使用这些插件的功能。这些功能包括：

服务类，如：POI搜索 PlaceSearch、输入提示 AutoComplete、路线规划 Driving/Walker/Transfer/Riding/Truck、地理编码 Geocoder、公交线路 LineSearch、公交站点 StationSearch、天气查询 Weather等；
地图控件，如：缩放工具条 ToolBar、比例尺 Scale、定位按钮 Geolocation等；
矢量图形编辑工具，如折线编辑器 PolylineEditor、多边形编辑器PolylgonEditor、圆形编辑器 CircleEditor等；
工具类，如鼠标绘制工具 MouseTool、测距工具 RangingTool等。

详见：

插件列表

插件的使用流程

使用插件的功能通常需要三个步骤：

引入插件，支持按需异步加载和同步加载，可同时引入多个插件；
创建插件实例，非特殊情况需避免重复创建多个实例，复用同一个实例即可；
调用实例的方法，使用相关功能。

插件的引入

异步加载插件

异步加载指的是在 JS API 加载完成之后，在需要使用到某个插件的时候，通过AMap.plugin方法按需引入插件，在plugin回调之后使用插件功能。

<script type="text/javascript" src="https://webapi.amap.com/maps?v=2.0&key=您申请的key值"></script> 
<script type="text/javascript" >
  var map = new AMap.Map('container',{
    zoom:12,
    center:[116.39,39.9]
  });
  AMap.plugin('AMap.ToolBar',function(){//异步加载插件
    var toolbar = new AMap.ToolBar();
    map.addControl(toolbar);
  });
</script>

异步加载多个插件

AMap.plugin的第一个参数使用数组即可同时加载引入多个插件。

AMap.plugin(['AMap.ToolBar','AMap.Driving'],function(){//异步同时加载多个插件
  var toolbar = new AMap.ToolBar();
  map.addControl(toolbar);
  var driving = new AMap.Driving();//驾车路线规划
  driving.search(/*参数*/)
});

同步预加载插件

如果您希望和 JS API 的主体同步加载某些插件，而不是异步加载，可以在 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" >
  var map = new AMap.Map('mapContainer',{
    zoom:12,
    center:[116.39,39.9]
  });
  var toolbar = new AMap.ToolBar();
  map.addControl(toolbar);
</script>

同步预加载多个插件

需要加载多个插件时，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>