vue3 腾讯地图 InfoWindow 弹框

1、vue项目index.html引入地图js

2、页面使用

<script setup lang="ts">
import { useMapStore } from '/@/store';

defineOptions({ name: 'PageMap' });
const emits = defineEmits(['update:area', 'update:address', 'update:latitude', 'update:longitude']);
const props = defineProps({
	area: { type: Array, default: () => [] },
	address: { type: String, default: '' },
	latitude: { type: [String, Number], default: '' },
	longitude: { type: [String, Number], default: '' },
});
const useMap = useMapStore();
const { location } = storeToRefs(useMap);
const position = new TMap.LatLng(location.value.lat, location.value.lng);
const initMap = async () => {
	// const TMap = (window as any).TMap;
	window.map = null;
	window.markerLayer = null;
	window.infoWindow = null;

	const center = new TMap.LatLng(location.value.lat, location.value.lng); //定义map变量，调用 TMap.Map() 构造函数创建地图
	const dom = document.getElementById('ref_map');
	window.map = new TMap.Map(dom, {
		center, //设置地图中心点坐标
		zoom: 16, //设置地图缩放级别
		rotation: 45, //设置地图旋转角度
	});
	window.infoWindow = new TMap.InfoWindow({
		map: window.map,
		position,
		offset: { x: 0, y: -40 }, //设置信息窗相对position偏移像素，为了使其显示在Marker的上方
		content:
			'<div class="map el-popper is-light el-popover el-popover--plain" style="z-index: 2070; position: absolute; padding: 0">\n' +
			'\t\t\t<div class="font-bold p-2 border-b">测试标题</div>\n' +
			'\t\t\t<div class="pl-3 pr-3 pb-4 pt-2 text-sm">\n' +
			'\t\t\t\t<div><span>联系人：</span><span>张三</span></div>\n' +
			'\t\t\t\t<div><span>电话：</span><span>187****2342</span></div>\n' +
			'\t\t\t</div>\n' +
			'\t\t\t<span class="el-popper__arrow" style="position: absolute; left: calc(50% - 5px); bottom: -5px"></span>\n' +
			'\t\t</div>',
		enableCustom: true,
	});
	window.infoWindow.close();
	updateLayer(position);
};
// 更新定位点
const updateLayer = (position: any) => {
	const layer = {
		id: '4',
		position,
		styleId: 'myStyle',
		properties: {
			//自定义属性
			title: 'marker1',
		},
	};
	if (window.markerLayer != null) window.markerLayer.updateGeometries([layer]);
	else {
		window.markerLayer = new TMap.MultiMarker({
			map: window.map,
			geometries: [layer],
			styles: {
				//创建一个styleId为"myStyle"的样式（styles的子属性名即为styleId）
				myStyle: new TMap.MarkerStyle({
					width: 50, // 点标记样式宽度（像素）
					height: 50, // 点标记样式高度（像素）
					src: '/images/emergency-location.png', //图片路径
					//焦点在图片中的像素位置，一般大头针类似形式的图片以针尖位置做为焦点，圆形点以圆心位置为焦点
					anchor: { x: 25, y: 32 },
					enableRelativeScale: true, // 是否开启相对缩放
					relativeScaleOptions: {
						scaleZoom: 15, // 设置marker图片宽高像素单位与zoom级别的瓦片像素相同的层级 如当设置为18时，zoom小于18marker会被缩小直至达到minScale设置的最小缩放倍数，大于时marker直至达到maxScale设置的最大缩放倍数；enableRelativeScale为true时生效，默认18
						minScale: 0.2, // 设置marker最小缩放倍数，enableRelativeScale为true时生效，默认0.5
						maxScale: 1, // 设置marker最大缩放倍数，enableRelativeScale为true时生效，默认1
					},
				}),
			},
		});
		window.markerLayer.on('click', clickMarkerHandler);
	}
};
const clickMarkerHandler = (evt) => {
	console.log(evt);
	window.infoWindow.open(); //打开信息窗
	window.infoWindow.setPosition(evt.geometry.position); //设置信息窗位置
	// window.infoWindow.setContent(evt.geometry.position.toString()); //设置信息窗内容
};
onUnmounted(() => {
	window.markerLayer?.off('click', clickMarkerHandler);
	// window.map.
});
onMounted(() => {
	nextTick(() => {
		setTimeout(() => initMap(), 500);
	});
});
</script>

<template>
	<div class="p-4 h-full w-full flex">
		<div id="ref_map" ref="refMap" style="height: 99%; width: 100%" />
	</div>
</template>
<style>
.map.el-popper.is-light > .el-popper__arrow:before {
	border: 0 !important;
}
</style>

3、实际效果, 弹框样式直接使用element的