uniapp微信小程序地图marker自定义气泡 customCallout偶尔显示不全解决办法

艾路菲尔2025-04-08 9:02

这个天坑问题，在微信开发工具上是不会显示出来的,只有在真机上才会偶尔出现随机样式偏移/裁剪/宽长偏移，询问社区也只是让你提交代码片段，并无解决办法。

一开始我怀疑是地图组件加载出现了问题，于是给地图加了一个v-if="reLoad"默认值false,等页面加载完成再渲染地图

typescript 复制代码

onReady(){
			this.reLoad = true
			this.mapCtx = uni.createMapContext("myMap")
},

结果发现还是会出现这个问题。

然而当我尝试给点击事件添加地图this.reLoad = false ；...this.reload = true的时候,变形的marker居然正常了！！！

但是，通过重载地图的方式在地图上有逻辑时改动会相当麻烦，而且也不好判断该在什么时候重载。在经过大量调试后发现

在地图渲染后赋值marker时

typescript 复制代码

// 地图渲染完成
			mapUpDate(e) {
				this.mapTime = this.mapTime + 1
				if(this.mapTime == 3){
					.....
					this.markers = markers
					setTimeout(()=>{
						this.markers = []
						this.$nextTick(()=>{
							this.markers = markers
						})
					},1000)
					....
				}
			},

只要在首次赋值后给一个延时清空并重新赋值就能解决显示变形的问题