vue-amap 源码简略分析_amap.exe-CSDN博客

本文链接：https://blog.csdn.net/qq_44708990/article/details/119847752

地图引入：

import Vue from 'vue';
import VueAMap from 'vue-amap';

// 初始化高德地图
VueAMap.initAMapApiLoader({
  key: '', // 高德API申请的key
  plugin: [
    // 按需加载的插件 可以忽略 AMap. 前缀
    'AMap.Autocomplete',
    'AMap.PlaceSearch',
    'AMap.Scale',
    'AMap.OverView',
    'AMap.ToolBar',
    'AMap.MapType',
    'AMap.PolyEditor',
    'AMap.CircleEditor',
    "AMap.Geolocation" // 定位控件，用来获取和展示用户主机所在的经纬度位置
  ],
})

在初始化地图时，使用的 initAMapApiLoader 方法，该方法指向一个类（AMapAPILoader），并通过传入的参数去触发构造器，接收实例化对象并触发该对象的 load 方法。

let lazyAMapApiLoaderInstance = null;
export const initAMapApiLoader = (config) => {
    // ...省略对lazyAMapApiLoaderInstance 的处理 
    lazyAMapApiLoaderInstance = new AMapAPILoader(config);
    lazyAMapApiLoaderInstance.load();
}

在这里插入图片描述

源码通过script动态链接（CDN）的方式引入地图。

在这里插入图片描述

1、load 方法执行之初，会先判断当前 window 对象是否有 AMap 对象。有的话会加载 loadUIAMap 方法，没有则创建标签引入

loadUIAMap() {
  return new Promise((resolve, reject) => {
    const UIScript = document.createElement('script');
    /* 
     * ...省略对地图版本号的判空和截取处理（1.4.4 => versionMain.versionSub.versionDetail ）
     * 已稍微做了简化
     */
    let src = `https://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();
  });
}

里面有一个 main-async.js 地址，猜测是用于异步加载的文件。（有大佬知道的话可以指点指点）

测试了一下：（https://webapi.amap.com/ui/1.1/main-async.js）

在这里插入图片描述

可以看出，该文件引入的前提是 window 对象中带有地图（AMap）实例。

2、内部的 _getScriptSrc 方法将按需加载的插件连接成字符串

 _getScriptSrc() {
   /*
    * ...省略：对传入的对象的 plugin 属性的处理（主要是检测是否加上 AMap. 的前缀，没有则添加上）、filter条件
    * config 为初始化传入的对象，包含 key值、版本号、plugin等
    */
    const params = Object.keys(config)
                         .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}`;
  }