使用amap-js引入高德地图AMap及其UI组件AMapUI

介绍

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