使用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