收藏
回答

使用地图组件加载500个marker数据,安卓机卡顿问题如何解决?

场景:往地图中加载500个点位,并通过regionchange监听地图scale的改变,实现marker随地图的放大而放大

结果: iOS很丝滑。安卓卡顿,频繁进行缩放操作会死机

<map
    class="map"
    id="mapId"
    :scale="scale"
    :longitude="center.longitude"
    :latitude="center.latitude"
    :rotate="rotate"
    :enable-rotate="true"
    :enable-poi="poi"
    :enable-building="building"
    :enable-scroll="scroll"
    :enable-overlooking="overlooking"
    :polygons="polygons"
    :polyline="polyline"
    :markers="markers"
    @tap="handleMapTap"
    @regionchange="regionchange"
   >
  </map>

//hasCarList = [...] // 500条数据

//data
scaleMap: {
  16: [5, 10],
  17: [8, 16],
  18: [12, 25],
  19: [18, 37],
  20: [25, 50]
}
// script
regionchange: debounce(function ({ type, detail, causedBy }) {
  const that = this
  if (!['scale'].includes(causedBy)) return
  if (type === 'end') {
    let scale = detail.scale
    // const scaleRatio = setScaleRatio(scale)
    // console.log(scale)
    that.addCarOverLayer({ scale, rotate: detail.rotate })
  }
}, 300),
    
// script
addCarOverLayer ({ rotate = 0, scale = ORIGIN_SCALE }) {
  const that = this
  // that.isAddCarOverlay = true
  let _width = 5// scaleRatio > 0 ? 5 * scaleRatio : Math.abs(scaleRatio / 5)
  let _height = 10// scaleRatio > 0 ? 10 * scaleRatio : Math.abs(scaleRatio / 10)
  if (scale < 17) {
    _width = that.scaleMap[16][0]
    _height = that.scaleMap[16][1]
  } else if (scale > 17 && scale < 18) {
    _width = that.scaleMap[17][0]
    _height = that.scaleMap[17][1]
  } else if (scale > 18 && scale < 19) {
    _width = that.scaleMap[18][0]
    _height = that.scaleMap[18][1]
  } else if (scale > 19 && scale < 20) {
    _width = that.scaleMap[19][0]
    _height = that.scaleMap[19][1]
  } else if (scale === 20) {
    _width = that.scaleMap[20][0]
    _height = that.scaleMap[20][1]
  }
  // console.log(_width, _height)
  // if (_width < 1) {
  //   _width = parseInt(_width)
  //   _height = parseInt(_height)
  // }
  // let _data = storeMarkers?.filter(item => item.platenumber) || []
  const _data = hasCarList.map((item) => ({
    longitude: item.longitude,
    latitude: item.latitude,
    iconPath: item.iconPath,
    width: _width,
    height: _height,
    rotate: rotate + item.rotate,
    id: item.id,
    anchor: { x: 0.5, y: 0.5 }
  }))
  _data.length && that.mapContext.addMarkers({
    markers: _data
  })
  // that.splitBatch(_data)
},


回答关注问题邀请回答
收藏

2 个回答

  • Demons
    Demons
    01-10

    请具体描述问题出现的流程,并提供能复现问题的简单代码片段(https://developers.weixin.qq.com/miniprogram/dev/devtools/minicode.html)。

    01-10
    有用
    回复
  • Dong Polaris🐉
    Dong Polaris🐉
    05-26

    老哥想问下你们后来解决了吗?我也遇到类似的问题了,IOS没事,安卓卡顿

    05-26
    有用
    回复
登录 后发表内容