詳解vue-amap引入高德JS API的原理

2022-06-01 14:01:25

vue-amap是對高德地圖JS API進行封裝的、適用於vue專案的地圖元件庫。在筆者開發的很多專案中都有用到，相比直接使用高德地圖JS API 來說，vue-amap更加好用，符合vue開發者的程式設計習慣。本文通過vue-amap原始碼分析了vue-amap引入高德JS API的原理。

vue-amap使用

在使用vue-amap時，main.js檔案往往有這樣一段程式碼：

import VueAMap from 'vue-amap'
Vue.use(VueAMap)
VueAMap.initAMapApiLoader({
  key: '82732XXXXXa5eXXXXb3face28c25',//你的高德key
  plugin: [
    'AMap.Autocomplete',
    'AMap.PlaceSearch',
    'AMap.Scale',
    'AMap.OverView',
    'AMap.ToolBar',
    'AMap.MapType',
    'AMap.PolyEditor',
    'AMap.CircleEditor'
  ],
  // 預設高德 sdk 版本為 1.4.4
  v: '1.4.14'
})

這段程式碼的關鍵就是initAMapApiLoader方法。

vue-amap入口檔案

看vue-amap原始碼，index.js 檔案有如下程式碼（部分程式碼）：

// 初始化介面
import {initAMapApiLoader} from './services/injected-amap-api-instance';
export {
  AMapManager,
  initAMapApiLoader,
  createCustomComponent
};

可見initAMapApiLoader方法是被vue-amap直接向使用者暴露的，我們研究其具體實現。

initAMapApiLoader方法

接著我們到對應目錄檢視initAMapApiLoader的定義：

let lazyAMapApiLoaderInstance = null;
import AMapAPILoader from './lazy-amap-api-loader';
import Vue from 'vue';
export const initAMapApiLoader = (config) => {
  if (Vue.prototype.$isServer) return;
  // if (lazyAMapApiLoaderInstance) throw new Error('You has already initial your lazyAMapApiLoaderInstance, just import it');
  if (lazyAMapApiLoaderInstance) return;
  if (!lazyAMapApiLoaderInstance) lazyAMapApiLoaderInstance = new AMapAPILoader(config);
  lazyAMapApiLoaderInstance.load();
};

initAMapApiLoader中使用到了lazy-amap-api-loader中定義的AMapAPILoader類，new了一個範例，並且呼叫了load()方法。

AMapAPILoader類

下面我們就看一下AMapAPILoader類的定義：

看長長的程式碼先摺疊，瞭解大概

下面就看load()方法：

load() {
  // 如果window上掛載了AMap，那麼直接呼叫loadUIAMap()
  if (this._window.AMap && this._window.AMap.Map) {
    return this.loadUIAMap();
  }

  if (this._scriptLoadingPromise) return this._scriptLoadingPromise;
  // 新建一個script標籤
  const script = this._document.createElement('script');
  script.type = 'text/javascript';
  // 非同步執行
  script.async = true;
  script.defer = true;
  script.src = this._getScriptSrc();

  const UIPromise = this._config.uiVersion ? this.loadUIAMap() : null;

  this._scriptLoadingPromise = new Promise((resolve, reject) => {
    this._window['amapInitComponent'] = () => {
      while (this._queueEvents.length) {
        this._queueEvents.pop().apply();
      }
      if (UIPromise) {
        UIPromise.then(() => {
          // initAMapUI 這裡呼叫initAMapUI初始化
          window.initAMapUI();
          setTimeout(resolve);
        });
      } else {
        return resolve();
      }
    };
    script.onerror = error => reject(error);
  });
  // script標籤插入到head中
  this._document.head.appendChild(script);
  return this._scriptLoadingPromise;
}

可以看到這段程式碼做了兩件事情：（1）增加引入高德的script標籤，script標籤的src是通過 _getScriptSrc生成的（2）引入AMapUI 元件庫，通過呼叫loadUIAMap實現

下面分別來看這兩個方法：

_getScriptSrc方法

_getScriptSrc() {
  // amap plugin prefix reg
  // 外掛字首
  const amap_prefix_reg = /^AMap./;

  const config = this._config;
  const paramKeys = ['v', 'key', 'plugin', 'callback'];

  // check 'AMap.' prefix
  if (config.plugin && config.plugin.length > 0) {
    // push default types
    config.plugin.push('Autocomplete', 'PlaceSearch', 'PolyEditor', 'CircleEditor');

    const plugins = [];

    // fixed plugin name compatibility.
    // 拼接外掛
    config.plugin.forEach(item => {
      const prefixName = (amap_prefix_reg.test(item)) ? item : 'AMap.' + item;
      const pureName = prefixName.replace(amap_prefix_reg, '');

      plugins.push(prefixName, pureName);
    });

    config.plugin = plugins;
  }

  const params = Object.keys(config)
  .filter(k => ~paramKeys.indexOf(k))
  .filter(k => config[k] != null)
  .filter(k => {
    return !Array.isArray(config[k]) ||
      (Array.isArray(config[k]) && config[k].length > 0);
  })
  .map(k => {
    let v = config[k];
    if (Array.isArray(v)) return { key: k, value: v.join(',')};
    return {key: k, value: v};
  })
  .map(entry => `${entry.key}=${entry.value}`)
  .join('&');
  return `${this._config.protocol}://${this._config.hostAndPath}?${params}`;
}

這段程式碼的作用就是最終要生成如下的字串：

"https://webapi.amap.com/maps?v=1.4.15&key=你的key&plugin=AMap.Scale&plugin=AMap.ToolBar&plugin=AMap.PolyEditor&plugin=AMap.Autocomplete,AMap.PlaceSearch&plugin=AMap.Geocoder"

從而可以在index.html中加入這樣的script, 這樣就把高度地圖的js-api引入了

<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=你的key&plugin=AMap.Scale&plugin=AMap.ToolBar&plugin=AMap.PolyEditor&plugin=AMap.Autocomplete,AMap.PlaceSearch&plugin=AMap.Geocoder"></script>

loadUIAMap方法

再來看loadUIAMap

loadUIAMap() {
  if (!this._config.uiVersion || window.AMapUI) return Promise.resolve();
  return new Promise((resolve, reject) => {
    const UIScript = document.createElement('script');
    const [versionMain, versionSub, versionDetail] = this._config.uiVersion.split('.');
    if (versionMain === undefined || versionSub === undefined) {
      console.error('amap ui version is not correct, please check! version: ', this._config.uiVersion);
      return;
    }
    let src = `${this._config.protocol}://webapi.amap.com/ui/${versionMain}.${versionSub}/main-async.js`;
    if (versionDetail) src += `?v=${versionMain}.${versionSub}.${versionDetail}`;
    UIScript.src = src;
    UIScript.type = 'text/javascript';
    UIScript.async = true;
    this._document.head.appendChild(UIScript);
    UIScript.onload = () => {
      setTimeout(resolve, 0);
    };
    UIScript.onerror = () => reject();
  });
}

這段程式碼的作用是要在index.html檔案中插入載入 AMapUI 的script標籤，如下所示：

<script async src="//webapi.amap.com/ui/1.1/main-async.js"></script>

總結

一句話總結vue-amap引入高德地圖API的原理：vue-map之所以能夠使用高德地圖的JS API 以及 AMapUI 是因為通過生成引入JS API 和 AMapUI的script標籤，並將標籤插入到專案的html檔案。

到此這篇關於詳解vue-amap引入高德JS API的原理的文章就介紹到這了,更多相關vue-amap引入高德JS API內容請搜尋it145.com以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援it145.com！