个人中心 | 微信开放社区

微信小程序地图动态加载marker出现闪烁现象

- 当前 Bug 的表现（附上截图） [图片] 可以看到拖动地图出现明显的闪烁。使用微信小程序地图动态展示marker，当用户拖拽或缩放地图时需要加载当前区域内的marker，但是使用setData({markers:markers})出现很明显的闪烁现象，该怎么解决？ - 预期表现移动地图，动态加载marker，地图上的marker无明显闪烁现象，让用户感觉不到marker刷新了。或者能否提供插入或删除单个marker的方法，这种批量操作marker的效率太低了。 - 复现路径用鼠标拖动地图，marker重新加载会出现闪烁 - 复现 Demo demo如下： map.wxml： [代码]<[代码][代码]view[代码] [代码]class[代码][代码]=[代码][代码]"map_container"[代码][代码]>[代码] [代码]<[代码][代码]map[代码] [代码]class[代码][代码]=[代码][代码]"map"[代码] [代码]id[代码][代码]=[代码][代码]"map"[代码] [代码]longitude[代码][代码]=[代码][代码]"{{longitude}}"[代码] [代码]latitude[代码][代码]=[代码][代码]"{{latitude}}"[代码] [代码]scale[代码][代码]=[代码][代码]"14"[代码] [代码]show-location[代码][代码]=[代码][代码]"true"[代码] [代码]markers[代码][代码]=[代码][代码]"{{markers}}"[代码] [代码]bindregionchange[代码][代码]=[代码][代码]"regionchange"[代码][代码]></[代码][代码]map[代码][代码]>[代码] [代码]</[代码][代码]view[代码][代码]>[代码]map.wxss： [代码].map_container{[代码][代码] [代码][代码]position[代码][代码]: [代码][代码]absolute[代码][代码];[代码][代码] [代码][代码]top[代码][代码]: [代码][代码]0[代码][代码];[代码][代码] [代码][代码]bottom[代码][代码]: [代码][代码]0[代码][代码];[代码][代码] [代码][代码]left[代码][代码]: [代码][代码]0[代码][代码];[代码][代码] [代码][代码]right[代码][代码]: [代码][代码]0[代码][代码];[代码][代码]}[代码][代码].map{[代码][代码] [代码][代码]width[代码][代码]: [代码][代码]100%[代码][代码];[代码][代码] [代码][代码]height[代码][代码]: [代码][代码]100%[代码][代码];[代码][代码]}[代码]map.js [代码]var[代码] [代码]amapFile = require([代码][代码]'../../libs/amap-wx.js'[代码][代码]);[代码][代码]var[代码] [代码]markersData = [];[代码][代码]Page({[代码][代码] [代码][代码]data: {[代码][代码] [代码][代码]markers: [],[代码][代码] [代码][代码]latitude: [代码][代码]'32.864377803922'[代码][代码],[代码][代码] [代码][代码]longitude: [代码][代码]'115.788491268263'[代码][代码] [代码][代码]},[代码][代码] [代码][代码]onLoad: [代码][代码]function[代码] [代码]() {[代码][代码] [代码][代码]var[代码] [代码]that = [代码][代码]this[代码][代码];[代码][代码] [代码][代码]},[代码][代码] [代码][代码]onShow:[代码][代码]function[代码][代码](){[代码][代码] [代码][代码]//模拟从服务器加载设备[代码][代码] [代码][代码]//模拟网络延迟[代码][代码] [代码][代码]setTimeout(() => {[代码][代码] [代码][代码]var[代码] [代码]markers = [代码][代码]this[代码][代码].getMarkers();[代码][代码] [代码][代码]this[代码][代码].setData({[代码][代码] [代码][代码]markers: markers[代码][代码] [代码][代码]});[代码][代码] [代码][代码]}, 1000);[代码][代码] [代码][代码]},[代码][代码] [代码][代码]regionchange:[代码][代码]function[代码][代码](res){[代码][代码] [代码][代码]if[代码][代码](res.type==[代码][代码]'end'[代码][代码]){[代码][代码] [代码][代码]console.log([代码][代码]"加载设备"[代码][代码]);[代码][代码] [代码][代码]//模拟从服务器加载设备[代码][代码] [代码][代码]//模拟网络延迟[代码][代码] [代码][代码]setTimeout(()=>{[代码][代码] [代码][代码]var[代码] [代码]markers = [代码][代码]this[代码][代码].getMarkers();[代码][代码] [代码][代码]this[代码][代码].setData({[代码][代码] [代码][代码]markers: markers[代码][代码] [代码][代码]});[代码][代码] [代码][代码]},1000);[代码][代码] [代码][代码]}[代码][代码] [代码][代码]},[代码][代码] [代码][代码]getMarkers:[代码][代码]function[代码][代码](){[代码][代码] [代码][代码]var[代码] [代码]markers1 = [ [代码][代码] [代码][代码]{ latitude: 32.863684789997, longitude: 115.794747394735 }[代码][代码] [代码][代码], { latitude: 32.866150490718, longitude: 115.779776056454 }[代码][代码] [代码][代码], { latitude: 32.85699840912, longitude: 115.793706230259 }[代码][代码] [代码][代码], { latitude: 32.868802796587, longitude: 115.795851934883 }[代码][代码] [代码][代码], { latitude: 32.868802796587, longitude: 115.795851934883 }[代码][代码] [代码][代码], { latitude: 32.865037454128, longitude: 115.784221396101 }[代码][代码] [代码][代码], { latitude: 32.861683316431, longitude: 115.794735614756 }[代码][代码] [代码][代码], { latitude: 32.86145345, longitude: 115.7946734 }[代码][代码] [代码][代码], { latitude: 32.866980115902, ongitude: 115.779949 }[代码][代码] [代码][代码], { latitude: 32.861960286233, longitude: 115.794732449203 }[代码][代码] [代码][代码], { latitude: 32.861960286233, longitude: 115.794732449203 }[代码][代码] [代码][代码], { latitude: 32.860691527707, longitude: 115.783249338155 }[代码][代码] [代码][代码], { latitude: 32.858660704851, longitude: 115.782761369842 }[代码][代码] [代码][代码], { latitude: 32.861673318033, longitude: 115.782898390111 }[代码][代码] [代码][代码], { latitude: 32.859451402325, longitude: 115.783271050545 }[代码][代码] [代码][代码], { latitude: 32.858075553001, longitude: 115.782085844506 }[代码][代码] [代码][代码], { latitude: 32.85980061309, longitude: 115.782478686392 }[代码][代码] [代码][代码], { latitude: 32.859026954912, longitude: 115.783450959086 }[代码][代码] [代码][代码], { latitude: 32.858902233697, longitude: 115.786543290987 }[代码][代码] [代码][代码]];[代码][代码] [代码][代码]var[代码] [代码]markers2 = [[代码][代码] [代码][代码]{ latitude: 32.863684789997, longitude: 115.794747394735 }[代码][代码] [代码][代码], { latitude: 32.859749503874, longitude: 115.782486744537 }[代码][代码] [代码][代码], { latitude: 32.865891748675, longitude: 115.778707367095 }[代码][代码] [代码][代码], { latitude: 32.868802796587, longitude: 115.795851934883 }[代码][代码] [代码][代码], { latitude: 32.868802796587, longitude: 115.795851934883 }[代码][代码] [代码][代码], { latitude: 32.865037454128, longitude: 115.784221396101 }[代码][代码] [代码][代码], { latitude: 32.861683316431, longitude: 115.794735614756 }[代码][代码] [代码][代码], { latitude: 32.86145345, longitude: 115.7946734 }[代码][代码] [代码][代码], { latitude: 32.866980115902, ongitude: 115.779949 }[代码][代码] [代码][代码], { latitude: 32.861960286233, longitude: 115.794732449203 }[代码][代码] [代码][代码], { latitude: 32.861960286233, longitude: 115.794732449203 }[代码][代码] [代码][代码], { latitude: 32.860691527707, longitude: 115.783249338155 }[代码][代码] [代码][代码], { latitude: 32.858660704851, longitude: 115.782761369842 }[代码][代码] [代码][代码], { latitude: 32.861673318033, longitude: 115.782898390111 }[代码][代码] [代码][代码], { latitude: 32.859451402325, longitude: 115.783271050545 }[代码][代码] [代码][代码], { latitude: 32.858075553001, longitude: 115.782085844506 }[代码][代码] [代码][代码], { latitude: 32.85980061309, longitude: 115.782478686392 }[代码][代码] [代码][代码], { latitude: 32.859026954912, longitude: 115.783450959086 }[代码][代码] [代码][代码], { latitude: 32.858902233697, longitude: 115.786543290987 }[代码][代码] [代码][代码]];[代码][代码] [代码][代码]var[代码] [代码]markers3 = [[代码][代码] [代码][代码]{ latitude: 32.863684789997, longitude: 115.794747394735 }[代码][代码] [代码][代码], { latitude: 32.859749503874, longitude: 115.782486744537 }[代码][代码] [代码][代码], { latitude: 32.85699840912, longitude: 115.793706230259 }[代码][代码] [代码][代码], { latitude: 32.868802796587, longitude: 115.795851934883 }[代码][代码] [代码][代码], { latitude: 32.868802796587, longitude: 115.795851934883 }[代码][代码] [代码][代码], { latitude: 32.865037454128, longitude: 115.784221396101 }[代码][代码] [代码][代码], { latitude: 32.865902040263, longitude: 115.780964494169 }[代码][代码] [代码][代码], { latitude: 32.86145345, longitude: 115.7946734 }[代码][代码] [代码][代码], { latitude: 32.866980115902, ongitude: 115.779949 }[代码][代码] [代码][代码], { latitude: 32.861960286233, longitude: 115.794732449203 }[代码][代码] [代码][代码], { latitude: 32.861960286233, longitude: 115.794732449203 }[代码][代码] [代码][代码], { latitude: 32.860691527707, longitude: 115.783249338155 }[代码][代码] [代码][代码], { latitude: 32.858660704851, longitude: 115.782761369842 }[代码][代码] [代码][代码], { latitude: 32.861673318033, longitude: 115.782898390111 }[代码][代码] [代码][代码], { latitude: 32.859451402325, longitude: 115.783271050545 }[代码][代码] [代码][代码], { latitude: 32.858075553001, longitude: 115.782085844506 }[代码][代码] [代码][代码], { latitude: 32.85980061309, longitude: 115.782478686392 }[代码][代码] [代码][代码], { latitude: 32.859026954912, longitude: 115.783450959086 }[代码][代码] [代码][代码], { latitude: 32.858902233697, longitude: 115.786543290987 }[代码][代码] [代码][代码]];[代码][代码] [代码][代码]var[代码] [代码]rm = (Math.random()*3).toFixed(0);[代码][代码] [代码][代码]console.log([代码][代码]"rm="[代码][代码]+rm);[代码][代码] [代码][代码]if[代码][代码](rm==1){[代码][代码] [代码][代码]return[代码] [代码]markers1;[代码][代码] [代码][代码]}[代码][代码]else[代码] [代码]if[代码][代码](rm == 2){[代码][代码] [代码][代码]return[代码] [代码]markers2;[代码][代码] [代码][代码]}[代码][代码]else[代码] [代码]{[代码][代码] [代码][代码]return[代码] [代码]markers3;[代码][代码] [代码][代码]}[代码][代码] [代码][代码]}[代码][代码]})[代码]

GitHub账号

选择需要上架的开放服务

案例类型