Vue3-天地图实现选点功能

需求描述：用户在对地图进行点击后，生成一个标记点，如果用户再次对其它地方进行点击，移除之前的标记点，生成新的标记点。
解决方案：
1、调用天地图的坐标拾取方法 T.CoordinatePickup，获取当前鼠标点击位置的地理坐标，并执行回调函数；
2、回调函数负责：判断是否以及存在标记点，如果存在，删除；然后新建一个标记点。
实现方法：

假定你已经在index.html里面引用天地图api了。
Vue3组件部分：

<script setup>
const currentLngLat = ref([1114.51444, 22.114514])
var marker = null
var map 
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)

    //创建坐标拾取组件，并设置回调函数，该组件会将拾取到的坐标点传给回调函数
    var cp = new T.CoordinatePickup(map, {callback: handChoose})
    //启用坐标拾取功能
    cp.addEvent()
}
//页面加载时，调用上面写好的`init`方法，天地图就在页面中显示出来了
onMounted(() => {
    init();
});

//选点功能
const handChoose = (lnglat) => {
    //如果存在标记，删除
    if (marker){
        map.removeOverLay(marker)
    }
    //更新当前选取的坐标点
    currentLngLat.value = [lnglat.lng.toFixed(6),lnglat.lat.toFixed(6)]
    //调用天地图Marker方法，生成标记
    marker = new T.Marker(T.LngLat(currentLngLat.value[0], currentLngLat.value[1]));
    //将marker渲染在页面上
    map.addOverLay(marker)
    }
</script>