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>