- 需求的场景描述（希望解决的问题）
<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设置一个开关函数，全部赋值后，统一更新。
本人水平有限，如有解决办法，欢迎各位大大指正。
你这样做应该没有什么区别，还是一次性传入了所有的数据到markers里面。尝试下这样做：
this.setData({markers: marker1});
this.setData({markers: [...marker1, ...marker2]});
this.setData({markers: [...marker1, ...marker2, ...marker3]});
实现分批添加marker，之前添加过的marker不会重复添加，每次setData之间可以添加setTimeout。
这种方式跟你通过接口分批次获取数据差不错
如果markers非常长呢？this.setData({markers: [...marker1, ...marker2, ........, ...marker1000]})这种写法不太现实吧？
已解决，原因在于小程序运行后，先进入渲染wxs，然后才onLoad，那时候wxs的数据为空。解决方法为在map加if，当数据全部加载完成后，if为真显示地图。
<blockwx:if="{{map_is_show}}"><mapclass='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不会自动更新，哪位有更好的方法吗？这样显隐会重新加载地图，影响体验。