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 Loadervar 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 Loadervar aMapJSAPILoader = new AMapJS.AMapJSAPILoader({ key: "您申请的key值", v: "1.4.12" // 版本号});// 创建AMapUI Loadervar 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