在vue中优雅地异步引入（懒加载）腾讯地图API

news2024/9/22 13:26:32

背景

接到一个需求需要在网站首页显示使用腾讯地图展示公司所在地。一开始我直接全局引入了腾讯地图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:开发者申请的腾讯地图key
    ak: "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>