收藏
回答

关于map组件设置markers的问题

问题模块 框架类型 问题类型 API/组件名称 终端类型 操作系统 微信版本 基础库版本
API和组件 小程序 需求 map,setData 客户端 6.6.7 2.1.3

- 需求的场景描述(希望解决的问题)


<map class='map' id='map' bindmarkertap='bind_mkr_tap'  bindcallouttap='bind_mkr_callout_tap'  bindtap='bind_map_tap' longitude="{{longitude}}" latitude="{{latitude}}" markers="{{markers}}" style="height:{{map_height}}px;" show-location>

</map>

//获取点数据
        wx.request({
          url: getApp().data.net_config.service.host,
          header: getApp().data.net_config.service.header,
          method: 'POST',
          data: {
            'pg': 'rcjg',
            'type': 'ini_data'
          },
          success: function (res) {
 
            if (getApp().data.util.json_state(res.data.state)) {
              let d = res.data.data
 
              var index = 0
              for (var Key in d) {
                //let markers_new = [];
                let g = map.bd09_To_Gcj02(d[Key].lng, d[Key].lat)
                let content = "档案号:\n\r" + d[Key].dah + "\n\r店名:\n\r" + d[Key].name
 
                let iconPath = map.get_mkr_ico(d[Key].lx);
                //console.log(g)
                let markers_new = {
                  id: d[Key].Id,
                  mark_index: index,
                  dah: d[Key].dah,
                  name: d[Key].name,
                  lx: d[Key].lx,
                  callout: {
                    content: content,
                    display: 'BYCLICK',
                    textAlign: 'left',
                    borderRadius: 50
                  },
                  latitude: g[1],
                  longitude: g[0],
                  iconPath: iconPath,
                  width: 20,
                  height: 20
                }
                let pr = "markers[" + index + "]"
                let pr_list = "markers_list[" + index + "]"
                console.log(index)
                that.setData({ [pr]: markers_new, [pr_list]: markers_new })
                index++
              }

因为点的数据有3000+条,大小超过了setData的限制,直接用that.setData({ markers: markers_new, markers_list: markers_new })会出问题,所以以上采用按数组一个一个设置。

实际效果是设置一个会全部重新加载一遍点,3000个点耗时1小时都还没完全加载。


换一个思路,将获取到的数据以1000个为一组进行分组,然后通过wxs进行组合,如下:

//获取点数据
       wx.request({
         url: getApp().data.net_config.service.host,
         header: getApp().data.net_config.service.header,
         method: 'POST',
         data: {
           'pg': 'rcjg',
           'type': 'ini_data'
         },
         success: function (res) {
 
           if (getApp().data.util.json_state(res.data.state)) {
             let d = res.data.data
             let d_len =0
             for (let ever in d) {//计算长度
               d_len++;
             }
             let max_make_len = Math.ceil(d[d_len - 1]['Id'] / 1000)
            // console.log(max_make_len)
             for (let i = 0; i < max_make_len; i++) {//分组,防止数组过大
               that.data.make_map.push([])
             }
              
            // console.log(that.data.make_map)
             let index = 0
             for (let Key in d) {
                 let g = map.bd09_To_Gcj02(d[Key].lng, d[Key].lat)
                 let content = "档案号:\n\r" + d[Key].dah + "\n\r店名:\n\r" + d[Key].name
                 let make_index = Math.ceil(Key / 1000)-1
                 let iconPath = map.get_mkr_ico(d[Key].lx);
                // console.log(make_index)
                 let new_make = {
                   id: d[Key].Id,
                   mark_index: index,
                   dah: d[Key].dah,
                   name: d[Key].name,
                   lx: d[Key].lx,
                   callout: {
                     content: content,
                     display: 'BYCLICK',
                     textAlign: 'left',
                     borderRadius: 50
                   },
                   latitude: g[1],
                   longitude: g[0],
                   iconPath: iconPath,
                   width: 20,
                   height: 20
                 }
                 that.data.make_map[make_index].push(new_make)
 
                 index++
               }
              
             for (let i = 0; i < max_make_len;i++) {
               let pr = "make_map[" + i + "]"
               console.log(pr)
               that.setData({ [pr]: that.data.make_map[i] })
             }
           }
         }
       })
<wxs module="map_make">
var make = function (d) {
  var make = []
  d.forEach(function (item, index) {
  make = make.concat(item)
  })
  return make
}
module.exports = {
  makes: make
};
</wxs>
 <map wx:if="{{true}}" class='map' id='map' bindmarkertap='bind_mkr_tap'  bindcallouttap='bind_mkr_callout_tap'  bindtap='bind_map_tap' longitude="{{longitude}}" latitude="{{latitude}}" markers="{{map_make.makes(make_map)}}" style="height:{{map_height}}px;" show-location>

</map>

   

然而markers加载不出来,经for测试,数据没有问题。

<block  wx:if="{{true}}" wx:for="{{map_make.makes(make_map)}}">
  <view> {{index}}: </view>
  <view> {{item.dah}} </view>
</block>

- 希望提供的能力

1、多个markers数组可以直接组合。

2、setData能接收更多数据。

3、setData设置一个开关函数,全部赋值后,统一更新

本人水平有限,如有解决办法,欢迎各位大大指正。


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

2 个回答

  • 小程序技术专员-sanford
    小程序技术专员-sanford
    2018-07-23

    你这样做应该没有什么区别,还是一次性传入了所有的数据到markers里面。尝试下这样做:

    this.setData({markers: marker1});

    this.setData({markers: [...marker1, ...marker2]});

    this.setData({markers: [...marker1, ...marker2, ...marker3]});

    实现分批添加marker,之前添加过的marker不会重复添加,每次setData之间可以添加setTimeout。

    这种方式跟你通过接口分批次获取数据差不错

    2018-07-23
    赞同
    回复 1
    • 钱萌
      钱萌
      2018-08-27

      如果markers非常长呢?this.setData({markers: [...marker1, ...marker2, ........, ...marker1000]})这种写法不太现实吧?

      2018-08-27
      回复
  • 李中伟
    李中伟
    2018-07-21

    已解决,原因在于小程序运行后,先进入渲染wxs,然后才onLoad,那时候wxs的数据为空。解决方法为在map加if,当数据全部加载完成后,if为真显示地图。

    <block wx:if="{{map_is_show}}">
      <map
      class='map' id='map' bindmarkertap='bind_mkr_tap'  bindcallouttap='bind_mkr_callout_tap'  bindtap='bind_map_tap' longitude="{{longitude}}" latitude="{{latitude}}" markers="{{map_make.makes(make_map)}}" style="height:{{map_height}}px;" show-location>
      </map>
    </block>
    that.setData({ map_is_show: false })
                  for (let i = 0; i < 2; i++) {
                    let pr = "make_map[" + i + "]"
                    that.setData({ [pr]: that.data.make_map[i] })
                  }
                  that.setData({ map_is_show: true })

    现在的问题是:当make_map中的数据发生改变时,如果不控制map_is_show隐藏再显示,map中的markers不会自动更新,哪位有更好的方法吗?这样显隐会重新加载地图,影响体验。

    2018-07-21
    赞同
    回复
登录 后发表内容