开发 地图 JS API 2.0 进阶教程 基础 插件的使用

插件的使用 最后更新时间: 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等。

详见:

插件的使用流程

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

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

插件的引入

异步加载插件

异步加载指的是在 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>

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