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