<template><!-- 定义地图显示容器 --><div id="container"></div>
</template><script setup>import { onMounted } from 'vue';const mapKeys = import.meta.env.VITE_GLOB_TX_MAP_KEYS;function initMap() {// //定义地图中心点坐标var center = new TMap.LatLng(39.98412, 116.307484);//定义map变量，调用 TMap.Map() 构造函数创建地图var map = new TMap.Map(document.getElementById('container'), {center: center, //设置地图中心点坐标zoom: 17.2, //设置地图缩放级别// pitch: 43.5, //设置俯仰角rotation: 45, //设置地图旋转角度});}function loadScript(callback) {//创建script标签，并设置src属性添加到body中var script = document.createElement('script');script.type = 'text/javascript';script.src = 'https://map.qq.com/api/gljs?v=1.exp&key=' + mapKeys;document.body.appendChild(script);script.onload = callback;}onMounted(() => {loadScript(() => {initMap();});});
</script><style scoped>#container {/*地图(容器)显示大小*/width: 1200px;height: 400px;}
</style>
const mapKeys = import.meta.env.VITE_GLOB_TX_MAP_KEYS; // 申请的 key
)
