首先需要正常的引入:
1.在index.html中引入script标签
<script src="http://api.tianditu.gov.cn/api?v=4.0&tk=你的key值" type="text/javascript"></script>
然后在想要引入的组件中:
<template>
<div id="mapDiv"></div>
</template>
<script lang="ts" setup>
import { onMounted } from "vue";
const init = () => {
var map = null;
var T = window.T;
map = new T.Map("mapDiv");
map.setMapType(window.TMAP_SATELLITE_MAP);
map.centerAndZoom(new T.LngLat(112, 36), 7);
};
onMounted(() => {
init();
});
</script>
<style scoped>
#mapDiv {
width: 100%;
height: 100vh;
}
</style>
在ts引入中,需要加上一个文件后缀为.d.ts的文件,方能识别其中的插件属性
在这个文件中写入:
interface Window {
T: any;
TMAP_SATELLITE_MAP: any,
}
有些项目可能还需要在tsconfig.json中的files中引入该文件以识别
"files": [
"window.d.ts"
]
运行即可看到效果啦