# @amap/amap-jsapi-loader 中文文档

规范地址：https://npmcn.com/package/%40amap/amap-jsapi-loader/

版本：1\.0\.1
npm 元数据更新时间：2026-03-18T10:23:01.464Z
中文译文更新时间：2026-11-05T23:37:33.466Z
软件包许可：MIT

本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。

原始 npm 页面：https://www.npmjs.com/package/%40amap/amap-jsapi-loader
原文对照：https://npmcn.com/package/%40amap/amap-jsapi-loader/?lang=original
源码仓库：https://gitlab.alibaba-inc.com/amap-web/amap-jsapi-loader

## 关键信息（来自 npm 元数据）

- 包体积（解压后）：136 kB，19 个文件
- 模块格式：CommonJS
- TypeScript 类型：包内自带
- 运行依赖：0 个
- 首次发布：2020-03-31T06:41:29.212Z
- 最新版本发布：2021-03-22T06:30:02.510Z
- 近 30 天下载量：172074（2026-10-06 至 2026-11-04，npm 官方下载统计）
- 已发布版本数：8（近 12 个月 0 个）

## 中文简介

高德官网提供的地图JSAPI加载器，可以避免多种异步加载API的错误用法

## 安装

```sh
npm install @amap/amap-jsapi-loader
```

也可以使用：`pnpm add @amap/amap-jsapi-loader`、`yarn add @amap/amap-jsapi-loader`、`bun add @amap/amap-jsapi-loader`

## README

# amap-jsapi-loader

amap-jsapi-loader 是高德开放平台官网提供的地图 JSAPI 的加载器，可帮助开发者快速定位、有效避免加载引用地图 JSAPI 各种错误用法。

该加载器具有以下特性：

-   支持以 普通JS 和 npm包 两种方式使用；
-   有效避免错误异步加载导致的 JSAPI 资源加载不完整问题；
-   对于加载混用多个版本 JSAPI 的错误用法给予报错处理；
-   对于不合法加载引用 JSAPI 给予报错处理；
-   支持指定 JSAPI 版本；
-   支持插件加载；
-   允许多次执行加载操作，网络资源不会重复请求，便于大型工程模块管理；

# USAGE

## AMapLoader.load方法参数说明

```js
AMapLoader.load({
    "key": "",              // 申请好的Web端开发者Key，首次调用 load 时必填
    "version": "2.0",   // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
    "plugins": []           // 需要使用的的插件列表，如比例尺'AMap.Scale'等
    "AMapUI": {             // 是否加载 AMapUI，缺省不加载
        "version": '1.1',   // AMapUI 缺省 1.1
        "plugins":[],       // 需要加载的 AMapUI ui插件
    },
    "Loca":{                // 是否加载 Loca， 缺省不加载
        "version": '1.3.2'  // Loca 版本，缺省 1.3.2
    },
}).then(()=>{
    window.AMap.xx;
    window.AMapUI.xx;
    window.Loca.xx
});

```

## AMapUI

AMapUI 用法和官网有一点点区别。通过 AMapUI.xx 来获取组件

```js
AMapLoader.load({
    key: '',//首次load必填
    version: '2.0',
    AMapUI: {
        version: '1.1',
        plugins: ['overlay/SimpleMarker'],
    }
}).then((AMap) => {
    map = new AMap.Map('container');

    // !!! 通过 AMap.SimpleMarker 获取组件
    new AMapUI.SimpleMarker({
        //前景文字
        iconLabel: 'A',
        //图标主题
        iconTheme: 'default',
        //背景图标样式
        iconStyle: 'red',
        map: map,
        position: map.getCenter()
    });
}).catch((e) => {
    console.error(e);
});
```

# 使用

#### 以普通 JS 方式使用 Loader

尚未发布在线Loader，可将 dist/index.js 复制到项目下

```
<script src="../dist/index.js"></script>
<script>
    AMapLoader.load({
        key:'',//首次load必填
        version:'2.0',
        plugins:['AMap.Scale']
    }).then((AMap)=>{
        map = new AMap.Map('container');
        map.addControl(new AMap.Scale())
    }).catch((e)=>{
        console.error(e);
    });   
</script>
```

#### 以 NPM 包方式使用 Loader

安装

```
tnpm i @alife/amap-jsapi-loader --save-dev
```

使用

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

AMapLoader.load().then((AMap)=>{
    map = new AMap.Map('container');
}).catch(e=>{
    console.log(e);
})

```

# 相关链接：

地               图 JSAPI：   [示例中心](https://lbs.amap.com/demo-center/js-api)    [教程](https://lbs.amap.com/api/javascript-api/summary)    [参考手册](https://lbs.amap.com/api/javascript-api/reference/map)

数据可视化 JSAPI：   [示例中心](https://lbs.amap.com/demo-center/loca-api)    [教程](https://lbs.amap.com/api/loca-api/prod_intro)    [参考手册](https://lbs.amap.com/api/loca-api/guide/baselayer)

## 常见问题

### @amap/amap-jsapi-loader 是什么？

高德官网提供的地图JSAPI加载器，可以避免多种异步加载API的错误用法

### 如何安装 @amap/amap-jsapi-loader？

在项目目录运行 npm install @amap/amap-jsapi-loader，或使用 pnpm add / yarn add / bun add。

### @amap/amap-jsapi-loader 支持 TypeScript 吗？

支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。

### @amap/amap-jsapi-loader 支持 ESM 还是 CommonJS？

以 CommonJS 形式发布，可以直接 require\(\)；在 ES Module 项目中也可以用 import 引入（Node\.js 会把 module\.exports 作为默认导出）。

### @amap/amap-jsapi-loader 可以商用吗？

@amap/amap-jsapi-loader 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。

### @amap/amap-jsapi-loader 的下载量有多少？

根据 npm 官方下载统计，@amap/amap-jsapi-loader 在 2026/10/06 – 2026/11/04 这 30 天内被下载 172,074 次，日均约 5,736 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。

### @amap/amap-jsapi-loader 还在维护吗？

最新版本 1\.0\.1 发布于 2021/03/22（5 年前）；至今共发布 8 个版本，其中过去 12 个月发布了 0 个；首次发布于 2020/03/31。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。