Question

回答

置顶微信小程序地图动态加载marker出现闪烁现象精选热门

2019-01-178738浏览问题模块： Bug反馈

框架类型	问题类型	操作系统	工具版本
小程序	Bug	Windows	V1.02.1812271

- 当前 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.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.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 }