vue-amap引入高德JS API的原理是什么(amap,JS,vue,开发技术)

vue-amap使用

在使用vue-amap时，main.js文件往往有这样一段代码：

importVueAMapfrom'vue-amap'Vue.use(VueAMap)VueAMap.initAMapApiLoader({key:'82732XXXXXa5eXXXXb3face28c25',//你的高德keyplugin:['AMap.Autocomplete','AMap.PlaceSearch','AMap.Scale','AMap.OverView','AMap.ToolBar','AMap.MapType','AMap.PolyEditor','AMap.CircleEditor'],//默认高德sdk版本为1.4.4v:'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的定义：

letlazyAMapApiLoaderInstance=null;importAMapAPILoaderfrom'./lazy-amap-api-loader';importVuefrom'vue';exportconstinitAMapApiLoader=(config)=>{if(Vue.prototype.$isServer)return;//if(lazyAMapApiLoaderInstance)thrownewError('YouhasalreadyinitialyourlazyAMapApiLoaderInstance,justimportit');if(lazyAMapApiLoaderInstance)return;if(!lazyAMapApiLoaderInstance)lazyAMapApiLoaderInstance=newAMapAPILoader(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){returnthis.loadUIAMap();}if(this._scriptLoadingPromise)returnthis._scriptLoadingPromise;//新建一个script标签constscript=this._document.createElement('script');script.type='text/javascript';//异步执行script.async=true;script.defer=true;script.src=this._getScriptSrc();constUIPromise=this._config.uiVersion?this.loadUIAMap():null;this._scriptLoadingPromise=newPromise((resolve,reject)=>{this._window['amapInitComponent']=()=>{while(this._queueEvents.length){this._queueEvents.pop().apply();}if(UIPromise){UIPromise.then(()=>{//initAMapUI这里调用initAMapUI初始化window.initAMapUI();setTimeout(resolve);});}else{returnresolve();}};script.onerror=error=>reject(error);});//script标签插入到head中this._document.head.appendChild(script);returnthis._scriptLoadingPromise;}

可以看到这段代码做了两件事情：（1）增加引入高德的script标签 ，script标签的src是通过 _getScriptSrc生成的 （2）引入AMapUI 组件库 ，通过调用loadUIAMap实现

下面分别来看这两个方法：

_getScriptSrc方法

_getScriptSrc(){//amappluginprefixreg//插件前缀constamap_prefix_reg=/^AMap./;constconfig=this._config;constparamKeys=['v','key','plugin','callback'];//check'AMap.'prefixif(config.plugin&&config.plugin.length>0){//pushdefaulttypesconfig.plugin.push('Autocomplete','PlaceSearch','PolyEditor','CircleEditor');constplugins=[];//fixedpluginnamecompatibility.//拼接插件config.plugin.forEach(item=>{constprefixName=(amap_prefix_reg.test(item))?item:'AMap.'+item;constpureName=prefixName.replace(amap_prefix_reg,'');plugins.push(prefixName,pureName);});config.plugin=plugins;}constparams=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=>{letv=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引入了

<scripttype="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)returnPromise.resolve();returnnewPromise((resolve,reject)=>{constUIScript=document.createElement('script');const[versionMain,versionSub,versionDetail]=this._config.uiVersion.split('.');if(versionMain===undefined||versionSub===undefined){console.error('amapuiversionisnotcorrect,pleasecheck!version:',this._config.uiVersion);return;}letsrc=`${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标签，如下所示：

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