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)
					....
				}
			},

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

相关推荐
盟道科技12 小时前
消息队列消费端幂等性实战:订单场景下重复消息不重复扣款的完整方案
小程序
毕业设计70313 小时前
(免费领源码) 基于微信小程序的预制菜商城的设计与实现25172-java、PHP、python、C#、小程序、大数据、单片机、网络工程等)
vue.js·python·mysql·微信小程序·pycharm·微信开发者工具·推荐算法
2601_9499506317 小时前
个人在线刷题的工具
学习·考研·小程序·刷题·小程序推荐
QQ_21696290961 天前
基于微服务架构的店铺管理系统的设计与实现
大数据·spring boot·后端·spring·微服务·小程序·架构
EatFan2 天前
Java接入支付宝 JSAPI 支付保姆教程(二):流程讲解与前后端代码讲解
前端·spring boot·后端·微信小程序·小程序·uni-app
2301_32241428042 天前
活力孕康复APP 47737- 原创(免费领源码+部署教程+开发环境)
java·vue.js·spring boot·mysql·微信小程序·idea·微信开发者工具
bug总结3 天前
uniapp vue3全局方法注册使用
前端·javascript·uni-app
CRMEB系统商城3 天前
CRMEB标准版系统(Java)v3.1正式发布
java·spring·微信小程序·php·教育电商
大佐不会说日语~3 天前
Android 16 下 uni-app APP 提示“网络连接失败”的排障与修复
android·uni-app
m0_587383003 天前
折扣卡CPS系统源码的技术架构与实战开发指南
人工智能·小程序·数据挖掘·系统架构·需求分析