這個天坑問題,在微信開發工具上是不會顯示出來的,只有在真機上才會偶爾出現隨機樣式偏移/裁剪/寬長偏移,詢問社區也只是讓你提交代碼片段,并無解決辦法。
一開始我懷疑是地圖組件加載出現了問題,于是給地圖加了一個v-if="reLoad"默認值false,等頁面加載完成再渲染地圖
onReady(){this.reLoad = truethis.mapCtx = uni.createMapContext("myMap")
},
結果發現還是會出現這個問題。
然而當我嘗試給點擊事件添加地圖this.reLoad = false ;…this.reload = true的時候,變形的marker居然正常了!!!
但是,通過重載地圖的方式在地圖上有邏輯時改動會相當麻煩,而且也不好判斷該在什么時候重載。在經過大量調試后發現
在地圖渲染后賦值marker時
// 地圖渲染完成mapUpDate(e) {this.mapTime = this.mapTime + 1if(this.mapTime == 3){.....this.markers = markerssetTimeout(()=>{this.markers = []this.$nextTick(()=>{this.markers = markers})},1000)....}},
只要在首次賦值后給一個延時清空并重新賦值就能解決顯示變形的問題