介绍
AMapJS 是AMap高德地图API加载器。帮助开发者快速加载高德地图相关API,在模块化应用、异步编程中使用API更加灵活便捷。
特性
- 支持 NPM 和 UMD 两种方式使用。
- 支持指定 API 版本。
- 支持插件模块加载。
- 支持Promise。
- 支持按需引入。
- 允许多次执行加载操作,网络资源不会重复请求。
安装
npm install --save amap-js
使用yarn:
yarn add amap-js
使用cdn:
<script type="text/javascript" src="https://unpkg.com/amap-js"></script>
快速入手
AMap JSAPI的加载:
import AMapJS from "amap-js";
// 创建AMapJSAPI Loader
var AMapLoader = new AMapJS.AMapLoader({
key: '您申请的key值',
version: '1.4.15', // 版本号, 默认1.4.15
plugins: [],
});
// 调用load方法加载loader并调用执行回调。
AMapLoader.load()
.then(loader => {
// 请求成功
})
.catch(e => {
// 请求失败
});
加载插件
// 请确保 loader.load() 加载完毕
AMapLoader.loadPlugin(['AMap.ToolBar'])
.then(() => {
console.log(AMap.ToolBar);
})
.catch(e => {})
AMap UI的加载:
import AMapJS from "amap-js";
var AMapLoader = new AMapJS.AMapLoader({
key: '您申请的key值',
version: '1.4.15',
plugins: [],
});
// 创建AMapUI Loader
var AMapUILoader = new AMapJS.AMapUILoader({
version: '1.0',
});
AMapLoader.load().then(() => {
AMapUILoader.load().then(loader => {
loader.initAMapUI(); // 初始化AMapUI(此方法允许多次调用, 但仅此初始化一次)
// 其他逻辑
console.log(AMap, AMapUI);
}).catch(e => {});
}).catch(e => {});
加载模块
// 请确保 loader.load() 加载完毕
// loadUI 加载UI模块
AMapUILoader.loadUI(['overlay/SimpleMarker'])
.then(([SimpleMarker]) => {})
.catch(e => {});
// loadUI 加载模块
AMapUILoader.loadModule(['ui/overlay/SimpleMarker', 'lib/$'])
.then(([SimpleMarker, $]) => {})
.catch(e => {});
load加载:
import AMapJS from "amap-js";
var AMapLoader = new AMapJS.AMapLoader({
key: '您申请的key值',
version: '1.4.15',
plugins: [],
});
var AMapUILoader = new AMapJS.AMapUILoader({
version: '1.0',
});
AMapJS.load([AMapLoader, AMapUILoader])
.then(([AMapLoader, AMapUILoader]) => {
AMapUILoader.initAMapUI();
// 其他逻辑
})
.catch(e => {});
按需引入
import { AMapLoader } from 'amap-js';
// 其他操作...
示例
在了解 AMapJS 基本使用后,我们可能更关心在框架中是如何使用的,这里简单演示两个目前主流的框架React
、Vue
。如下:
Vue中使用
App.vue
<template>
<div id="app">
<div ref="map" id="map"></div>
</div>
</template>
<script>
import AMapJS from "amap-js";
export default {
mounted() {
const AMapLoader = new AMapJS.AMapLoader({
key: '您申请的key值',
version: '1.4.15',
plugins: [],
});
const AMapUILoader = new AMapJS.AMapUILoader({
version: '1.0', // UI组件库版本号
});
AMapLoader.load().then(() => {
AMapUILoader.load().then(loader => {
loader.initAMapUI(); // 初始化AMapUI(此方法允许多次调用, 但仅此初始化一次)
// 其他逻辑
new AMap.Map(this.$refs.map);
console.log(AMap, AMapUI);
}).catch(e => {});
}).catch(e => {});
}
};
</script>
React中使用
App.js
import React, { Component } from "react";
import AMapJS from "amap-js";
class App extends Component {
componentDidMount() {
const AMapLoader = new AMapJS.AMapLoader({
key: '您申请的key值',
version: '1.4.15',
plugins: [],
});
const AMapUILoader = new AMapJS.AMapUILoader({
version: '1.0', // UI组件库版本号
});
AMapLoader.load().then(() => {
AMapUILoader.load().then(loader => {
loader.initAMapUI(); // 初始化AMapUI(此方法允许多次调用, 但仅此初始化一次)
// 其他逻辑
new AMap.Map(this.$refs.map);
console.log(AMap, AMapUI);
}).catch(e => {});
}).catch(e => {});
}
render() {
return (
<div id="app">
<div ref="map" id="map"></div>
</div>
);
}
}
export default App;
总结
AMapJS不局限于一种方式使用,请可以结合自己实际业务逻辑进行变换。
AMapJS 更多示例及API请参见: amap-js
快速链接
文档:amap-js
Github: iderekli/amap-js
高德开放平台:javascript-api