前言: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地图展示无效果