在vue中优雅地异步引入（懒加载）腾讯地图API
背景
接到一个需求需要在网站首页显示使用腾讯地图展示公司所在地。一开始我直接全局引入了腾讯地图js，结果发现在用户打开登陆页面的时候首页比较缓慢，为了提高用户登陆的加载效率，需要优化为异步引入。
思路
根据官网的示例，通过dom追加script的方式来加载js，并且在加载完成时会回调window下的callback方法。
但是这么使用的话，每次都需要在当前组件中写一个全局的函数，A组件中写的回调函数可能覆盖B组件写的回调函数，或者每个人用的都不相同导致window下多了冗余函数，因此在参考了高德vue组件库：vue-amap中懒加载的实现后，想要在组件中通过Promise的方式异步引入腾讯地图API。
代码实现
TMapInit.js中的lazyTMapApiLoaderInstance实现（代码已上传gitee）：
let lazyTMapApiLoaderInstance = null;
/*** 修改下列ak即可使用自己的授权码* 腾讯地图组件初始化, 要用到天气和地图控件必须引入当前js,* 通过lazyTMapApiLoaderInstance.then()能在地图载入完成时触发事件*/
export function initTMap() {loadTMapScript({// TODO:开发者申请的腾讯地图keyak: "XXXX-XXXX-XXXX",// 需要用到的插件libraries: ['service']})
}/*** 载入腾讯地图js文件* @param config*/
function loadTMapScript(config) {let concatStr = '';for (let lib of config.libraries) {concatStr += lib + ',';}// 引入腾讯地图js，当引入完成时会调用window.customVueTMap.loadCallBack方法const TMap_URL = "https://map.qq.com/api/gljs?v=1.exp&libraries=" + concatStr.substring(0, concatStr.length - 1) + "&key=" + config.ak + "&callback=customVueTMap.loadCallBack";// 插入script脚本let scriptNode = document.createElement("script");scriptNode.setAttribute("src", TMap_URL);document.body.appendChild(scriptNode);
}/*** 懒加载腾讯地图方法* @returns {Promise<unknown>}*/
lazyTMapApiLoaderInstance = new Promise((resolve, reject) => {initTMap();// 地图异步加载完成回调处理，避免每个组件都要在自己的功能写个window下的函数造成冲突window.customVueTMap = {loadCallBack() {resolve();}}
})
export {lazyTMapApiLoaderInstance};
TMapInit.js的使用示例
<template><div id="app"><div style="width: 90%; height: 500px;" id="myMap"></div></div>
</template><script>import {lazyTMapApiLoaderInstance} from './components/MyMap/util/TMapInit'lazyTMapApiLoaderInstance.then(() => {new TMap.Map('myMap', {center: new TMap.LatLng(39.909, 116.397),zoom: 11,pitch: 0})})
</script>
总结
通过这种方式，后续也能引入多个不同地图供应商的jsApi，而不用担心没用上的另外一个API耽误了我们页面的加载效率。
参考连接
官网异步加载API示例
高德地图Vue组件：gyy/vue-amap
懒加载腾讯地图API示例