# @amap/amap-jsapi-loader

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

Latest version **1.0.1** (published 2021-03-22) · MIT license · 0 weekly downloads

## Install

```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
```

## Health

**Score 20/100 (F)** — status: abandoned.

Positive: has types; no vulnerabilities.

Warnings: low downloads; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.1 |
| Published | 2021-03-22 |
| First published | 2020-03-31 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 133.1 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | mengmeng.du@alibaba-inc.com |
| Maintainers | qfish, jimu.lj, mengmeng.du, donglai.ydl |
| Keywords | amap, jsapi, sdk, loader, 地图, 高德 |

## Links

- npm: https://www.npmjs.com/package/@amap/amap-jsapi-loader
- Repository: git@gitlab.alibaba-inc.com:amap-web/amap-jsapi-loader
- npm.io page: https://npm.io/package/@amap/amap-jsapi-loader

## Recent versions

- 1.0.1 (latest) — 2021-03-22
- 1.0.0 — 2021-03-22
- 0.0.7 — 2020-10-29
- 0.0.6 — 2020-10-29
- 0.0.4 — 2020-08-05
- 0.0.3 — 2020-07-31
- 0.0.2 — 2020-07-31
- 0.0.1 — 2020-03-31

## 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);
})

```

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



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

---
_Source: https://npm.io/package/@amap/amap-jsapi-loader · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._