介绍

AMapJS 是高德地图加载模块，帮助您轻松的加载高德地图相关API。之后根据高德地图API做你想做。它可以灵活便捷的在现代化的工具链以及前端框架中使用。

特性

• 异步加载。
• 支持Promise API。
• 支持预加载。

安装

npm install --save amap-js
复制代码

使用yarn:

yarn add amap-js
复制代码

使用cdn:

<script type="text/javascript" src="https://unpkg.com/amap-js/dist/amap-js.min.js"></script>
复制代码

Hello World

AMap JS API的加载:

一个简单的AMapJS加载AMap JS API例子如下:

import AMapJS from "amap-js";// 创建AMapJSAPI Loader
var aMapJSAPILoader = new AMapJS.AMapJSAPILoader({key: "您申请的key值",v: "1.4.12" // 版本号
});// 调用load方法加载AMap JSAPI并执行then回调。
aMapJSAPILoader.load().then(function(AMap) {// 其他逻辑
});
复制代码

AMap UI组件库的加载:

一个简单的AMapJS加载AMapUI API例子如下:

import AMapJS from "amap-js";// 创建AMapJSAPI Loader
var aMapJSAPILoader = new AMapJS.AMapJSAPILoader({key: "您申请的key值",v: "1.4.12" // 版本号
});// 创建AMapUI Loader
var aMapUILoader = new AMapJS.AMapUILoader({v: "1.0" // UI组件库版本号
});aMapJSAPILoader.load().then(function(AMap) {aMapUILoader.load().then(function(initAMapUI) {var AMapUI = initAMapUI(); // 这里调用initAMapUI初始化并返回AMapUI// 其他逻辑});
});
复制代码

示例

了解AMapJS基本使用后，我们可能更关心在框架中是如何使用的，这里简单演示两个目前主流的框架React、Vue。如下：

Vue中使用

App.vue

<template><div class="app"><div ref="map" id="map"></div></div>
</template><script>
import AMapJS from "amap-js";export default {mounted() {const aMapJSAPILoader = new AMapJS.AMapJSAPILoader({v: "1.4.12",key: "您申请的key值"});const aMapUILoader = new AMapJS.AMapUILoader({v: "1.0" // UI组件库版本号});aMapJSAPILoader.load().then(AMap => {aMapUILoader.load().then(initAMapUI => {const AMapUI = initAMapUI(); // 这里调用initAMapUI初始化并返回AMapUI// 其他逻辑console.log(AMap);console.log(AMapUI);new AMap.Map(this.$refs.map);});})}
};
</script>
复制代码

React中使用

App.js

import React, { Component } from "react";
import AMapJS from "amap-js";class App extends Component {componentDidMount() {const aMapJSAPILoader = new AMapJS.AMapJSAPILoader({v: "1.4.12",key: "您申请的key值"});const aMapUILoader = new AMapJS.AMapUILoader({v: "1.0" // UI组件库版本号});aMapJSAPILoader.load().then(AMap => {aMapUILoader.load().then(initAMapUI => {const AMapUI = initAMapUI(); // 这里调用initAMapUI初始化并返回AMapUI// 其他逻辑console.log(AMap);console.log(AMapUI);new AMap.Map(this.refs.map);});})}render() {return (<div className="app"><div ref="map" id="map"></div></div>);}
}export default App;
复制代码

总结

AMapJS的使用不局限于一种方式，请可以结合自己实际业务逻辑进行方式变换。

AMApJS 更多示例及API请参见: amap-js

快速链接

Github: iDerekLi/amap-js

文档：amap-js

高德开放平台：javascript-api