JS API 的加载

JS API 2.0 版本提供了两种方案引入：

1. 使用 JS API Loader 进行加载；

2. 以 window._AMapSecurityConfig = {securityJsCode: '「你申请的安全密钥」', }; AMapLoader.load({key: '替换为你申请的 key', //申请好的 Web 端开发 Key，首次调用 load 时必填 version: '2.0', //指定要加载的 JS API 的版本，缺省时默认为 1.4.15 plugins: ['AMap.Scale'], //需要使用的的插件列表，如比例尺'AMap.Scale'，支持添加多个如：['AMap.Scale','...','...'] AMapUI: {//是否加载 AMapUI，缺省不加载 version: '1.1', //AMapUI 版本 plugins: ['overlay/SimpleMarker'], //需要加载的 AMapUI ui 插件 },Loca: {//是否加载 Loca， 缺省不加载 version: '2.0', //Loca 版本 }, }) .then((AMap) => {var map = new AMap.Map('container'); //'container'为 

2.2 NPM 安装 Loader

安装：

npm i @amap/amap-jsapi-loader --save

 使用 NPM 安装 Loader，并设置 key 和安全密钥：

import AMapLoader from '@amap/amap-jsapi-loader';window._AMapSecurityConfig = {securityJsCode: '「你申请的安全密钥」',
};
AMapLoader.load({key: '替换为你申请的 key', //申请好的 Web 端开发者 Key，首次调用 load 时必填
version: '2.0', //指定要加载的 JS API 的版本，缺省时默认为 1.4.15
plugins: ['AMap.Scale'], //需要使用的的插件列表，如比例尺'AMap.Scale'，支持添加多个如：['AMap.Scale','...','...']})
.then((AMap) => {var map = new AMap.Map('container'); //'container'为 
 容器的 id
})
.catch((e) => {console.log(e);
});

3、 //地图初始化应该在地图容器 

 已经添加到 DOM 树之后 var map = new AMap.Map('container', {zoom: 12, });HTML

3.2 异步加载

特别注意

异步加载指的是通过appendChild()将 JS API 的JavaScript

使用 async 属性：

 //声明异步加载回调函数
//设置你的安全密钥
window._AMapSecurityConfig = {securityJsCode: '「你申请的安全密钥」',
};window.onLoad = function () {var map = new AMap.Map('container');
};