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

1. 问题

---

用户频繁切换头部 tab，数据请求，地图更新

ios正常 ！！android手机会出现闪退情况

2. 解决

---

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

代码语言：javascript复制

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

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

代码语言：javascript复制

//点击标记点
bindmarkertap="onTapMarker"

代码语言：javascript复制

//点击气泡
bindcallouttap="onTapMarker"

3. 其他未确定因素

---

也有可能 tab 切换过快，接口请求过于频繁造成的，此时你可以写一个计时器，避免这种问题

代码语言：javascript复制

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

ios android display map

0 人点赞