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

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

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

这些功能包括但不限于:

服务类

地图控件

矢量图形编辑工具

工具类

PlaceSearch

  POI 搜索

ToolBar

  缩放工具条

PolylineEditor

  折线编辑器

MouseTool

  鼠标绘制

AutoComplete

  输入提示

Scale

  比例尺

PolygonEditor

  多边形编辑器

RangingTool

  测距

Driving/Transfer/Riding/Truck

  路线规划

ControlBar

  控制罗盘

RectangleEditor

  矩形编辑

Geocoder

  地理编码

Geolocation

  定位控件

CircleEditor

  圆形编辑器

LineSearch

  公交线路

HawkEye

  鹰眼控件

EllipseEditor

  椭圆编辑

StationSearch

  公交站点

MapType

  图层切换控件

BezierCurveEditor

  贝塞尔曲线编辑器

1、插件的使用流程

1

1.1 准备

成为开发者并创建 key

为了正常调用 API ,请先注册成为高德开放平台开发者,并申请 web 平台(JS API)的 key 和安全密钥,点击 具体操作

提示

你在2021年12月02日以后申请的 key 需要配合你的安全密钥一起使用。

2

1.2 创建地图

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

1.3 引入插件

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

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

1.4 创建插件实例

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

非特殊情况需避免重复创建多个实例,复用同一个实例即可

5

1.5 调用实例的方法,使用相关功能

toolbar.hide() //设置工具条隐藏
提示

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>

返回顶部 示例中心 常见问题 智能客服 公众号
二维码