VUE3 天地图使用自定义模板添加信息窗口

       前言：vue3想使用自定义vue template作为天地图自定义信息窗口内容，但vue2中extend已弃用，所以换了种替代extend方法去实现需求。

        解决思路：创建一个模板虚拟节点，实例化并传给天地图自定义窗口内容即可

        天地图初始化过程已省略，创建自定义信息窗口关键代码如下：

        自定义vue template比如test.vue：

<!-- vue template test.vue -->
<template>
    <div class="title" @click="handleClick">{{ title }}</div>
</template>

<script setup>
	const props = defineProps({
		title: {
			type: String,
			required: true
		}
	})
</script>

<style scope>
    .title {
        color: red
    }
</style>

        天地图所在的组件里map.vue创建信息窗口关键代码：

<!-- 天地图所在的组件 map.vue -->
<template>
    <div id="mapDiv"></div>
</template>

<script setup>
    import { createVNode, render } from 'vue'
    import TestTemplate from './test.vue' // 引用自定义test组件

    let map = null // 天地图对象 初始化省略

    // 创建信息窗口
    const openInfoWindow = () => {
        // 创建虚拟节点并传参
        const infoWindowContent = createVNode(TestTemplate , {
		    title: '测试传参数据'
		})
        let node = document.createElement('div') // 创建一个div节点
        render(infoWindowContent, node) // 实例组件挂载到node节点上
        // 监听组件点击事件
        infoWindowContent.el.addEventListener('click', () => {})
        // 创建天地图信息窗口 infoWindowContent.el：test模板dom
        let infoWindow = new T.InfoWindow(infoWindowContent.el, {
            closeButton: false // 关闭天地图弹框默认关闭图标
        })
        // 设置信息窗口经纬度(地图坐标) 成都
        infoWindow.setLngLat(new T.LngLat(104.08394, 30.576625))
        // 地图添加信息窗口，地图自己去初始化哈，别直接复制说代码跑不起来，这里只是示例
        map.addOverLay(infoWindow)
    }
</script>

        上面是直接把信息窗口挂载到地图上，如果需要挂载到自定义标注上，将以下代码

// 设置信息窗口经纬度(地图坐标) 成都
infoWindow.setLngLat(new T.LngLat(104.08394, 30.576625))
// 地图添加信息窗口，地图自己去初始化哈，别直接复制说代码跑不起来，这里只是示例
map.addOverLay(infoWindow)

        替换为

// script已省略，关键代码示例如下
import iconImg from './icon.png' // 引入自定义标注图标

// 创建自定义标注 这里是成都
let icon = new T.Icon({
    iconUrl: iconImg,
    iconSize: new T.Point(30, 30)
    iconAnchor: new T.Point(15, 30)
})
let marker = new T.Marker(new T.LngLat(104.08394, 30.576625), { icon: icon })
// 自定义标注位置打开信息窗口
marker.openInfoWindow(infoWindow)
// 地图添加自定义标注
map.addOverLay(marker)

        去除天地图信息窗口原有样式

<style scoped>
	//	修改天地图信息窗口默认样式
	:deep(.tdt-infowindow-content-wrapper, .tdt-infowindow-tip) {
		background-color: transparent;
	}
	:deep(.tdt-infowindow-content-wrapper) {
		padding: 0;
	}
	:deep(.tdt-infowindow-content) {
		margin: 0;
	}
    :deep(.tdt-infowindow-tip-container) {
        display: none;
    }
</style>

        以下是思路各参考地址，非常感谢！

        天地图API：http://lbs.tianditu.gov.cn/api/js4.0/examples.html

        vue2方法参考地址：https://blog.csdn.net/fredricen/article/details/106172766

        vue3中关于vue2.extend替代方案参考地址：https://www.jianshu.com/p/6fb680c387be

        踩坑记录更新：

        2024.05.22：template组件一定由一层div包裹，vue3习惯写法了有时不需要那层div，多层级div地图展示无效果