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

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

一开始我怀疑是地图组件加载出现了问题,于是给地图加了一个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)
					....
				}
			},

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

相关推荐
weixin_lynhgworld3 分钟前
全场景定制化开发,适配多品类的盲盒小程序解决方案
小程序
Muchen灬26 分钟前
【uniapp】(3)引入uviewUI组件
uni-app
m0_6948455715 小时前
Oh My Zsh 使用指南:Zsh 终端配置与插件管理教程
服务器·前端·小程序·开源·github
喂_balabala17 小时前
小程序-下拉刷新不走回调函数
微信小程序
2501_9339072118 小时前
宁波本凡科技提供性价比高的智能解决方案
科技·微信小程序·小程序
一字白首19 小时前
进阶初学:微信小程序核心语法与配置实战DAY02
微信小程序·小程序
2601_9520137620 小时前
2024仿东郊微端家政预约上门小程序【亲测可用】家政管理系统抢单派单开源源码
小程序
毕设源码-朱学姐20 小时前
【开题答辩全过程】以 基于uniapp的云笔记系统的设计与实现为例,包含答辩的问题和答案
笔记·uni-app
CHU72903521 小时前
随时随地学新知——线上网课教学小程序前端功能详解
前端·小程序
职豚求职小程序1 天前
京东26春招笔试题库宝藏小程序刷题yyds!
小程序