高德地图JSAPI Loader使用攻略

高德地图api文档：https://lbs.amap.com/api/jsapi-v2/guide/abc/prepare

安装

安装推荐使用 JSAPI Loader 进行加载，使用npm安装，引入包的大小非常小。

按 NPM 方式使用 Loader

安装：

npm i @amap/amap-jsapi-loader --save
// 官方文档中加了-dev字段，加了-dev字段就只能在本地的时候使用，部署到服务器后将不引入包

使用：

import AMapLoader from '@amap/amap-jsapi-loader';

AMapLoader.load({
    "key": "您申请的key值",   // 申请好的Web端开发者Key，首次调用 load 时必填
    "version": "2.0",   // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
    "plugins": []  //插件列表
}).then((AMap)=>{
    map = new AMap.Map('container');
}).catch(e => {
    console.log(e);
})

注册账号并申请Key

使用高德地图api需要注册高德地图账号并在开发者中心申请key。

注册好账号后登录 https://console.amap.com/dev/key/app 或进入控制台申请key。

首先进入右上角的[应用]，在左侧菜单栏选择[应用管理] => [我的应用]，并根据说明创建新应用，应用创建完成后在相应的应用后面点击添加来获取我们的key。

我们可以选择Web服务，如果需要其他平台的使用，可以根据需要进行更换，下方可使用服务会列出这个key可以使用的服务。

提交成功后就可以得到key了：

把key直接复制到我们引入高德地图的 AMapLoader.load() 方法中的key就可以了。

基础地图组件使用

可以在load()的then()方法中配置我们的组件：

<div id="container" style="width: 100%; height: 300px;">div>

// 创建地图方法
createMap() {
  AMapLoader.load({
      "key": "您申请的key值",   // 申请好的Web端开发者Key，首次调用 load 时必填
      "version": "2.0",   // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
      "plugins": []  //插件列表
  }).then((AMap)=>{
      let amap = new AMap.Map('container',{ // container为容器的id
          zoom: 15, //初始化地图层级
          center: [112.5266, 27.91507] //初始化地图中心点
      });
  }).catch(e => {
      console.log(e);
  })
}

页面中的效果是这样的：

可以在 高德地图API文档 中查看其它地图参数，根据需要进行添加。

其它组件使用

其它的组件可以根据 官方文档 进行参考，具体的一些组件在教程菜单内：

绝大多数的组件都是通过 map.add(component) 进行实现的，下面就以点标记组件为例详细说明。

点标记组件使用

点标记通过new一个 AMap.Marker 然后加入到我们的map中，具体代码：

// 创建地图方法
createMap() {
  AMapLoader.load({
      "key": "您申请的key值",   // 申请好的Web端开发者Key，首次调用 load 时必填
      "version": "2.0",   // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
      "plugins": []  //插件列表
  }).then((AMap)=>{
      let amap = new AMap.Map('container',{ // container为容器的id
          zoom: 15, //初始化地图层级
          center: [112.5266, 27.91507] //初始化地图中心点
      });
      // 标记
      let marker = new AMap.Marker({
        position: [112.5266, 27.91507] // 基点位置
      });
      // 地图添加标记
      amap.add(marker);
  }).catch(e => {
      console.log(e);
  })
}

页面中就会显示我们加的点标记了：

其余组件都可以根据文档的示例进行 map.add(component) 来实现。

常见问题

1.远程获取的经纬度数据地图没有渲染

这种问题很可能是 createMap() 方法没有写在请求的回调函数中。因为请求是异步的，在获取数据的过程中，会向下执行地图渲染，此时是没有position的数据的。将创建地图的方法写在回调函数中，就可以确保获取到position的数据后再渲染地图。