vue3 项目引入天地图（ts，cli版本）

首先需要正常的引入：

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"
  ]

运行即可看到效果啦