vue3使用异步加载腾讯地图

vue3中之前是在index.html中全局加载

复制代码

<!doctype html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <link rel="icon" type="image/svg+xml" href="/logo.png" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>
    <%= VITE_APP_TITLE %>
  </title>
  <script charset="utf-8" src="https://map.qq.com/api/js?v=2.exp&key=您的key&libraries=drawing"></script>
</head>

<body>
  <div id="app"></div>
  <script type="module" src="/src/main.ts"></script>
</body>

</html>

现在需要异步加载腾讯地图，key的话是从后端获取的，大概来记录下

第一步：新建文件夹tencent-map.ts，进行从后端获取key(我这边的key后端加了密，我这需要进行用CryptoJS进行解密)，然后进行载入腾讯地图js获取api

复制代码

import { GetMapKey } from '@CM/api/common'
import CryptoJS from 'crypto-js'


//获取腾讯地图的key
export const getMapKeyFun = async () => {
  const res = await GetMapKey()
  const { type, value } = res
  if (type == 'SUCCESS') {
    const secretKey = 'MKhmEob9b5iU2iHG'
    const keyUtf8 = CryptoJS.enc.Utf8.parse(secretKey)
    const encryptedHex = CryptoJS.enc.Hex.parse(value)
    const encryptedBase64 = CryptoJS.enc.Base64.stringify(encryptedHex)
    const decrypted = CryptoJS.AES.decrypt(encryptedBase64, keyUtf8, {
      mode: CryptoJS.mode.ECB,
      padding: CryptoJS.pad.Pkcs7
    })
    return decrypted.toString(CryptoJS.enc.Utf8)
  }
}

/**
 * 载入腾讯地图js文件
 * @param config
 */
const loadTMapScript=async()=> {
  const key = await  getMapKeyFun();

  // 引入腾讯地图js，当引入完成时会调用window.customVueTMap.loadCallBack方法
  const TMap_URL = `https://map.qq.com/api/js?v=2.exp&key=${key}&libraries=drawing&callback=customVueTMap.loadCallBack`;
  // 插入script脚本
  let scriptNode = document.createElement("script");
  scriptNode.setAttribute("src", TMap_URL);
  document.body.appendChild(scriptNode);
}

/**
 * 懒加载腾讯地图方法
 * @returns {Promise<unknown>}
 */

const lazyTMapApiLoaderInstance = new Promise<void>((resolve, reject) => {
  loadTMapScript()
  // 地图异步加载完成回调处理，避免每个组件都要在自己的功能写个window下的函数造成冲突
  window.customVueTMap = {
    loadCallBack() {
      resolve();
    }
  }
})
export {lazyTMapApiLoaderInstance};

第二步：在组件中使用

复制代码

<script lang="ts" setup>
import { lazyTMapApiLoaderInstance } from '@CG/utils/tencent-map'

declare const qq: any // 临时声明，待定义

onMounted(() => {
  lazyTMapApiLoaderInstance.then(() => {
     new qq.maps.Map(document.getElementById('container'), {
        center: new qq.maps.LatLng(39.908165, 116.397165),
        zoom: 15,
        mapTypeControl: false,
        zoomControlOptions: {
          position: qq.maps.ControlPosition.TOP_RIGHT
        },
        panControlOptions: {
          position: qq.maps.ControlPosition.TOP_RIGHT
        }
      })
   })
})
</script>