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的

相关推荐
加载中loading...13 分钟前
Linux线程安全(二)条件变量实现线程同步
linux·运维·服务器·c语言·1024程序员节
Wx120不知道取啥名16 分钟前
C语言之长整型有符号数与短整型有符号数转换
c语言·开发语言·单片机·mcu·算法·1024程序员节
biomooc44 分钟前
R语言 | paletteer包:拥有2100多个调色板!
r语言·数据可视化·1024程序员节
Hello.Reader1 小时前
FFmpeg 深度教程音视频处理的终极工具
ffmpeg·1024程序员节
Y.O.U..2 小时前
STL学习-容器适配器
开发语言·c++·学习·stl·1024程序员节
就爱敲代码2 小时前
怎么理解ES6 Proxy
1024程序员节
憧憬一下2 小时前
input子系统的框架和重要数据结构详解
arm开发·嵌入式·c/c++·1024程序员节·linux驱动开发
三日看尽长安花3 小时前
【Tableau】
1024程序员节
sswithyou3 小时前
Linux的调度算法
1024程序员节
武子康3 小时前
大数据-187 Elasticsearch - ELK 家族 Logstash Filter 插件 使用详解
大数据·数据结构·elk·elasticsearch·搜索引擎·全文检索·1024程序员节