微信小程序<map>地图组件闪退问题解决

image.png

问题:
用户频繁切换头部tab,数据请求,地图更新
ios正常
!!android手机会出现闪退情况

解决:
经过各种排查,发现主要原因是因为标注文本总是呈显示状态,以至于过标注点时,绘制过多造成小程序闪退,此时只要注释掉display:'ALWAYS'即可

// markers 储存点位属性
...
 callout: {
      content: null, //地址名称
      padding: 10, //气泡间距
      borderRadius: 4, //气泡圆角
      fontSize: 14, //气泡文字大小
      bgColor: '#fca93b', //气泡背景色
      color: '#ffffff', //气泡文字颜色
      // display: 'ALWAYS'
    }

当然,注释掉之后气泡只有在点击标注点的时候才会显示,想要用户点击标记点或者点击气泡再进行操作的话,可以分别给<map>设置

//点击标记点
bindmarkertap="onTapMarker" 
//点击气泡
bindcallouttap="onTapMarker" 
image.png

其他未确定因素:
也有可能tab切换过快,接口请求过于频繁造成的,此时你可以写一个计时器,避免这种问题

const app = getApp()
let timer = null
Page({
...
clickNav(e) {
    clearTimeout(timer)

    let { index } = e.currentTarget.dataset
    this.setData({activeIndex: index })
   //设置一个800ms的缓冲,避免用户的频繁点击
    timer = setTimeout(() => {
   //调用获取地图数据的接口
      app.$api.lifeServeList().then(res => {
      })
    }, 800)
  },
})

推荐阅读更多精彩内容