vue-amap引入高德JSAPI的原理
发布网友
发布时间：2024-10-22 07:48
共1个回答
热心网友
时间：2024-11-08 10:01
vue-amap是对高德地图JSAPI进行封装的、适用于vue项目的地图组件库。在笔者开发的很多项目中都有用到，相比直接使用高德地图JSAPI来说，vue-amap更加好用，符合vue开发者的编程习惯。本文通过vue-amap源码分析了vue-amap引入高德JSAPI的原理。
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>总结一句话总结vue-amap引入高德地图API的原理：vue-map之所以能够使用高德地图的JSAPI以及AMapUI是因为通过生成引入JSAPI和AMapUI的script标签，并将标签插入到项目的html文件。
原文：https://juejin.cn/post/7103733273573982245