Vue3-天地图实现自定义样式信息窗口并根据经纬度获取地址信息

一直忘记更，直接上代码。

一点碎碎念

虽然还有一些功能实现没有发出来，但是后续应该不会再更新原生天地图API的内容了，主要有以下原因：
1、以前的代码写的很乱，整理起来比较头疼（真想给去年的自己一拳）。
2、这些内容都是接触前端地图框架之前为了完成需求所琢磨的原生天地图API用法，在那个时候我属于是懂点GIS但是不知道有WebGIS框架，所以其实属于比较笨的方法。
3、对于要求用到天地图的项目，我建议还是使用一个前端WebGIS框架，引入天地图作为底图，再通过框架去实现各种需求。

<script setup>
import {onMounted, ref} from "vue";
var marker = null
var map 

const currentLngLat = ref([1114.51444, 22.114514])
const locateInfo = ref('')

//直接定义infoWin的内容以及样式
const infoWinContent = ref(" \<div class='infoWin''>\ " +
    " \<div class='infoWin-deg' style='left:266px ;rotate: 90deg '></div>\ "+
    " \<div class='infoWin-deg' style='top: 178px ;rotate: 270deg'></div>\ "+
    " \<div class='infoWin-deg'></div>\ "+
    " \<div class='infoWin-title'>所选地点详情</div>\ "+
    "\<div class='infoWin-body' style='margin:10px 0;height: 80px '>\ " +
    " \<div id='info' class='info-r'> " +
    "  \</div>\ " +
    "\<div id='infoBtn' class='info-button' >\ " +
    "查看选址信息" +
    "\</div>\ " +
    "\</div>\ " +
    " \</div>\ "
    )

onMounted(() => {
    init();
});

const init = () => {
    //这里T指向天地图对象
    var T = window.T
    //初始化地图，创建一个新的地图实例
    map = new T.Map("mapDiv","EPSG:4326")
    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()
}

const handChoose = (lnglat) => {
    //手动标点功能
    if (marker){
        map.removeOverLay(marker)
    }
    currentLngLat.value = [lnglat.lng.toFixed(6),lnglat.lat.toFixed(6)]
    marker = new T.Marker(T.LngLat(currentLngLat.value[0], currentLngLat.value[1]));
    map.addOverLay(marker)
    getDetailLocation(currentLngLat.value[0],currentLngLat.value[1])
    openInfoWin(currentLngLat.value)
    }
const getDetailLocation = (lnglat_lng, lnglat_lat) => {
    axios({
        url: "https://api.tianditu.gov.cn/geocoder",
        methods: 'post',
        params: {
            tk: 'YOUR_TOKEN',
            type: "geocode",
            postStr: "{'lon':" + lnglat_lng + ",'lat':" + lnglat_lat + ",'ver':1}"
        }})
        .then(
            (data) => {
                let addressdata = data.data
                //保存地址信息
                locateInfo.value = addressdata.result.formatted_address;
            },
        )
        .catch(
            (error) => {
                alert("获取失败");
            }
        )
}

const openInfoWin = (lnglat) => {
    //绑定信息窗口
    if (infoWin){
        infoWin.closeInfoWindow()
    }
    infoWin = new T.InfoWindow();
    infoWin.setLngLat(lnglat)
    infoWin.setContent(infoWinContent.value)
    marker.openInfoWindow(infoWin)
    setTimeout(()=>{
        //将地址信息显示在span上
        let e = document.getElementById('info')
        e.append(locateInfo.value)
        document.getElementById('infoBtn').onclick = function () {
            //点击事件
            showAddressInfo()
        };
    },500)
}

const showAddressInfo = () => {
    console.log('showAddressInfo')
}
</script>