基于VUE3集成天地图

1.在项目中添加了天地图的JavaScript API。
官方参考：
申请天地图key地址。
天地图API地址。

<!-- 在你的index.html或者相应的模板文件中 -->
<script src="http://api.tianditu.gov.cn/api?v=4.0&tk==你的天地图key"></script>

2.创建一个Vue 3组件，并在组件中添加地图的初始化逻辑。

<template>
  <div class="tiandituMap">
    <div ref="mapContainer" class="map-container"></div>
  </div>
</template>
<script lang='ts' setup>
    const mapContainer = ref(null);
    onMounted(() => {
        initMap()
    });
    let zoom = ref(12) //层级
    let allPoints: any = []; //所有点
    const initMap = () => {
        let T = window.T; //这里T指向天地图对象
        if (T) {
            //初始化地图，创建一个新的地图实例
            //其中 `T.Map` 接收的第一个参数是在html中天地图标签的ID
            //第二个参数是天地图的参考系，我这里设置的是 `EPSG:4326`，也就是WGS84 坐标参考系。
            //map = new T.Map("mapContainer","EPSG:4326");
            const map = new T.Map(mapContainer.value);
            
            //这一步调用了天地图的setMapType方法，用来设置天地图的图层类型，我这里设置的是卫星图图层
            map.setMapType(window.TMAP_HYBRID_MAP );

            //这一步设置的是地图的初始化后的中心点坐标以及缩放级别
            //做完这一步，天地图就以及能在地图上显示出来了
            map.centerAndZoom(new T.LngLat(116.404, 39.915), zoom.value); // 设置中心点和缩放等级
            
            // //创建缩放平移控件对象(H5)
            // const control = new T.Control.Zoom();
            // // //添加缩放平移控件(H5)
            // map.addControl(control);
           
            // 监听地图点击事件
            map.addEventListener("click",function(e){
                // 获取点击位置的经纬度
                const lngLat = e.lnglat
                console.log("经度:", lngLat.lng, "纬度:", lngLat.lat);
            })
        }
    }
</script>
<style lang='less' scoped>
    .tiandituMap{
        width: 100%;
        height: 100%;
    }
    
    .map-container {
        width: 100%;
        height: 100%;
    }
</style>

3.地图覆盖物使用

	//创建标注对象
    var marker = new T.Marker(new T.LngLat(116.411794, 39.9068));
    //向地图上添加标注
    map.addOverLay(marker);
    //地图移除标注
    map.removeOverLay(marker);
    
    //创建图片对象
    var icon = new T.Icon({
         iconUrl: "http://api.tianditu.gov.cn/img/map/markerA.png",
         iconSize: new T.Point(19, 27),
         iconAnchor: new T.Point(10, 25)
     });
     //向地图上添加自定义标注
     var iconMarker = new T.Marker(new T.LngLat(116.411794, 39.9068), {icon: icon});
     map.addOverLay(iconMarker);
    //地图移除自定义标注
    map.removeOverLay(iconMarker);
    
     var latlng = new T.LngLat(116.420837,39.902395);
            var label = new T.Label({
                text: "天地图：<a href='https://www.tianditu.gov.cn'  target='_blank'>https://www.tianditu.gov.cn </a>",
                position: latlng,
                offset: new T.Point(-9, 0)
            });
            //创建地图文本对象
            map.addOverLay(label);
        //地图移除文本对象
    map.removeOverLay(label);
    
    //清除地图上所有覆盖物
    map.clearOverLay()