bindregionchange调用后台接口数据动态修改markers死循环
发布于 6 年前 作者 nyan 13928 次浏览 来自 问答
  • 当前 Bug 的表现（可附上截图）
  • 预期表现
  • 复现路径
  • 提供一个最简复现 Demo

使用map组件，用bindregionchange视图改变去调用后台接口数据动态修改markers，出现重复调用死循环，期望效果是：视图改变动态修改markers不去再触发bindregionchange事件

onScaleRegion(e) {
    let etype = e.type;
    // 只捕捉移动后的点的信息
    if (etype === 'end') {
      // 获取可视区域的东北和西南的坐标
      this.getRegion()
    }
  }

getRegion() {
    let that = this
    this.mapCtx = wx.createMapContext('map')
    that.mapCtx.getRegion({
      success: function(res) {
        let northeast = app.request.qqMapTransBaiduMap(res.northeast.latitude, res.northeast.longitude)
        let southwest = app.request.qqMapTransBaiduMap(res.southwest.latitude, res.southwest.longitude)
        that.mapCtx.getScale({
          success: (scale) => {
            // 调用后台接口，更新markers
            that.getData(northeast, southwest, scale.scale)
          }
        })
      }
    })
  },
getData(northeast, southwest, scale) {
    let that = this
    let param = {
      beginLat: southwest.lat,
      beginLng: southwest.lng,
      endLat: northeast.lat,
      endLng: northeast.lng,
      level: that.getLevel(scale)
    }
    if (param.level === 'list') {
      param.lat = that.data.latitude
      param.lng = that.data.longitude
    }
    app.request.get('/xxx', param).then(data => {
      wx.showToast({
        title: 'test',
        mask: true
      })
      let arr = (data.records || []).map((item, index) => {
        let result = app.request.baiduMapTransQQMap(item.lat, item.lng)
        return {
          id: index,
          latitude: result.lat,
          longitude: result.lng,
          iconPath: '../../image/pos.png',
          width: 30,
          height: 30,
          callout: {
            content: item.storeName,
            padding: 5,
            borderRadius: 5,
            display:'BYCLICK',
            textAlign:'center',
            bgColor: '#FFFFFF'
          }
        }
      })
      that.setData({
        markers: arr
      })
    })
  },
回到顶部