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

网罗开发

发布于 2021-04-26 11:22:40

1.2K0

文章被收录于专栏：网罗开发网罗开发

1. 问题

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

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

2. 解决

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

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

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

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

//点击气泡
bindcallouttap="onTapMarker"

3. 其他未确定因素

也有可能 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)
  },
})

本文参与腾讯云自媒体同步曝光计划，分享自微信公众号。

原始发表：2021-04-11，如有侵权请联系 cloudcommunity@tencent.com 删除

ios