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

介绍

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

发布时间:2019-02-20