前言
天地图的JS版本目前只能通过地图API的方法引入，功能较少，很多需求都需要自己编写方法来实现。并且天地图的官方文档也并不适用于结合Vue3的开发，所以开发过程中可谓是各种踩坑。
在这个文集中，我将回顾之前在使用Vue3搭配天地图开发过程中实现的各种功能，供大家参考。
1、介绍
天地图的JS版本目前只能通过地图API的方法引入，所以在前端开发中要使用天地图，需要通过<script>标签将API引用到页面中（默认你已经通过天地图官方申请到了Key）
index.html文件下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<title>Vue3天地图</title>
//这里引入天地图接口
<script type="text/javascript" src="http://api.tianditu.gov.cn/api?v=4.0&tk=您的密钥"></script>
</head>
<body>
</body>
</html>
2、在Vue3 的<script setup> 中使用天地图
先看代码：
<script setup>
var map
var localsearch
const init = () => {
//这里T指向天地图对象
var T = window.T;
//初始化地图，创建一个新的地图实例
//其中 `T.Map` 接收的第一个参数是在html中天地图标签的ID
//第二个参数是天地图的参考系，我这里设置的是 `EPSG:4326`，也就是WGS84 坐标参考系。
map = new T.Map("mapDiv","EPSG:4326");
//这一步调用了天地图的setMapType方法，用来设置天地图的图层类型，我这里设置的是卫星图图层
map.setMapType(window.TMAP_HYBRID_MAP );
//这一步设置的是地图的初始化后的中心点坐标以及缩放级别
//做完这一步，天地图就以及能在地图上显示出来了
map.centerAndZoom(new T.LngLat(114.51444, 22.114514), 13);
//创建缩放平移控件对象(H5)
var control = new T.Control.Zoom();
//添加缩放平移控件(H5)
map.addControl(control);
//这里我创建了一个手动选址的实例，以后再讲
var cb = new T.CoordinatePickup(map, {callback: handChoose})
cb.addEvent();
//这里我创建了一个地址搜索的实例
//第一个参数固定为你的天地图实例，也就是上面的map
//第二个参数是每页显示的最大内容数量，我这里设置的是显示10个地名搜索结果
locateSearch = new T.LocalSearch(map,{pageCapacity:10})
//这里是我自己写的一个显示行政区划边界范围的组件,以后在讲
var YT = totianjson(yantian,"red",0.5)
map.addOverLay(YT)
}
//页面加载时，调用上面写好的`init`方法，天地图就在页面中显示出来了
onMounted(() => {
init();
});
</script>
通过上面的代码，就能够在成功显示出天地图的底图了。
