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 } = resif (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>