腾讯地图点位点击后展示信息窗口

效果展示：

点击点位后：

点击下一个清除上一个信息窗体：

代码实现：

监听点位点击：

如何清除上一个信息窗体：

清除：

代码：

let currentInfoWindow = null; // 用于保存当前显示的信息窗体对象

const fetchData = async (page = 1) => {
	try {
		const response = await axios.get(`http://localhost:8071/api/poi/poi_list?page=${page}`);
		poiList.value = response.data.data.data; // 获取数据列表
		currentPage.value = response.data.data.current_page; // 当前页
		pageSize.value = response.data.data.per_page; // 每页条数
		total.value = response.data.data.total; // 总条目数
		
		updateMarkers(); // 将获取到的数据更新地图点位
	} catch (error) {
		showToast('Error fetching data');
		console.error('Error fetching data:', error);
	}
};

const updateMarkers = () => {
	const markerGeometries = poiList.value.map((poi, index) => ({
		id: `${index + 1}`, // Generate a unique ID for each marker
		position: new TMap.LatLng(poi.lat, poi.lng),
		properties: {
			"title": poi.title
		}
	}));

	// Update TMap.MultiMarker
	marker.setGeometries(markerGeometries);

	// 添加点击事件监听器
	marker.on('click', (event) => {
		if (event.geometry && event.geometry.properties && event.geometry.properties.title) {
			// 清除之前的信息窗体
			if (currentInfoWindow) {
				currentInfoWindow.close();
			}
			
			// 显示当前点击的信息窗体
			showInfoWindow(event.geometry);
		}
	});
};

const showInfoWindow = (geometry) => {
	const infoWindow = new TMap.InfoWindow({
		map: map,
		position: geometry.position,
		content: `<div style="padding: 5px;">${geometry.properties.title}</div>`,
		offset: { x: 0, y: -30 } // 偏移以使信息窗体显示在标记上方
	});

	// 更新当前显示的信息窗体对象
	currentInfoWindow = infoWindow;
};

const initMap = () => {
	const center = new TMap.LatLng(31.187358368937858, 121.46002628131794);

	// Initialize the map with initial zoom level
	map = new TMap.Map("container", {
		rotation: 20,
		pitch: 30,
		zoom: zoomLevel.value, // Use zoomLevel from ref()
		center: center,
	});
	
	marker = new TMap.MultiMarker({
		map: map,
		styles: {
			// 点标记样式
			marker: new TMap.MarkerStyle({
				width: 20, // 样式宽
				height: 30, // 样式高
				anchor: {
					x: 10,
					y: 30
				}, // 描点位置
			}),
		},
		geometries: [],
	});

	// 点击屏幕查看经纬度
	map.addListener('click', function(event) {
		console.log(event);
		// console.log('Clicked LatLng:', event.latLng.lat(), event.latLng.lng());
	});
};