示例中心
功能在线体验
控制台
您现在的位置: 开发 > 地图 JS API > 教程 > 入门 > 插件的使用 >

高德 开发 地图 JS API 教程 入门 插件的使用

更新时间:2018年05月28日

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

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

详见「插件列表

插件的使用流程

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

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

插件的引入

异步加载插件

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

<script type="text/javascript" data-src="http://webapi.amap.com/maps?v=1.4.7&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" data-src="http://webapi.amap.com/maps?v=1.4.7&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.plugin(toolbar);
</script>

同步加载多个插件

需要加载多个插件时,plugin参数中的插件名称之间以逗号分割。

<script type="text/javascript" data-src="http://webapi.amap.com/maps?v=1.4.7&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.plugin(toolbar);
    var driving = new AMap.Driving();
    driving.search(/*参数*/)
</script>

插件列表

类名

类功能说明

AMap.ElasticMarker

灵活点标记,可以随着地图级别改变样式和大小的 Marker

AMap.ToolBar

工具条,控制地图的缩放、平移等

AMap.Scale

比例尺,显示当前地图中心的比例尺

AMap.OverView

鹰眼,显示缩略图

AMap.MapType

图层切换,用于几个常用图层切换显示

AMap.Geolocation

定位,提供了获取用户当前准确位置、所在城市的方法

AMap.AdvancedInfoWindow

高级信息窗体,整合了周边搜索、路线规划功能

AMap.Autocomplete

输入提示,提供了根据关键字获得提示信息的功能

AMap.PlaceSearch

地点搜索服务,提供了关键字搜索、周边搜索、范围内搜索等功能

AMap.PlaceSearchLayer

搜索结果图层类,将搜索结果作为图层展示

AMap.DistrictSearch

行政区查询服务,提供了根据名称关键字、citycode、adcode 来查询行政区信息的功能

AMap.LineSearch

公交路线服务,提供公交路线相关信息查询服务

AMap.StationSearch

公交站点查询服务,提供途经公交线路、站点位置等信息

AMap.Driving

驾车路线规划服务,提供按照起、终点进行驾车路线的功能

AMap.TruckDriving

货车路线规划

AMap.Transfer

公交路线规划服务,提供按照起、终点进行公交路线的功能

AMap.Walking

步行路线规划服务,提供按照起、终点进行步行路线的功能

AMap.Riding

骑行路线规划服务,提供按照起、终点进行骑行路线的功能

AMap.DragRoute

拖拽导航插件,可拖拽起终点、途经点重新进行路线规划

AMap.ArrivalRange

公交到达圈,根据起点坐标,时长计算公交出行是否可达及可达范围

AMap.Geocoder

地理编码与逆地理编码服务,提供地址与坐标间的相互转换

AMap.CitySearch

城市获取服务,获取用户所在城市信息或根据给定IP参数查询城市信息

AMap.IndoorMap

室内地图,用于在地图中显示室内地图

AMap.MouseTool

鼠标工具插件

AMap.CircleEditor

圆编辑插件

AMap.PolyEditor

折线、多边形编辑插件

AMap.MarkerClusterer

点聚合插件

AMap.RangingTool

测距插件,可以用距离或面积测量

AMap.CloudDataLayer

云图图层,用于展示云图信息

AMap.CloudDataSearch

云图搜索服务,根据关键字搜索云图点信息

AMap.Weather

天气预报插件,用于获取未来的天气信息

AMap.RoadInfoSearch

道路信息查询,已停止数据更新,反馈信息仅供参考

AMap.Hotspot

热点插件,地图热点已默认开启,不用手动添加,由Map的 isHotspot 属性替代

AMap.Heatmap

热力图插件


移动端
示例中心
功能
在线体验
常见问题