公告列表
公告列表
收藏
回答

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

框架类型 问题类型 操作系统 工具版本
小程序 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.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;
    }
  }
})




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

13 个回答

  • 胡刚权
    胡刚权
    2019-01-17

    @微信团队

    2019-01-17
    有用 1
    回复 3
    • zhyzhyzzz
      zhyzhyzzz
      2019-06-11

      解决了吗？我这里动态改变就会闪

      2019-06-11
      赞
      回复
    • 小魏
      小魏
      2020-04-10
      解决了吗
      2020-04-10
      赞
      回复
    • 风向决定发型
      风向决定发型
      2022-09-14
      这应该是数据渲染时内存不足的问题吧
      2022-09-14
      赞
      回复
  • 我，秦始皇
    我，秦始皇
    02-06

    我也遇到这个问题。动态更新某个marker的ui(边框/背景颜色），闪烁特厉害，效果完全不能直视。

    模拟器上倒没问题一点不闪烁。

    拖拽/缩放时候marker都正常。

    感觉像是setdata(marker..操作内部先清零一遍mark刷新一次，然后再添加所有mark再刷新导致的。明显逻辑有问题啊。

    这部分lib代码是刚毕业的程序员写的么？

    02-06
    有用
    回复
  • 神经蛙
    神经蛙
    01-08

    2024-01-08 有人解决了吗

    01-08
    有用
    回复
  • Big高
    Big高
    2023-10-06

    2023年10月06日16:18:54 有人解决吗，安卓部分机型

    2023-10-06
    有用
    回复
  • 💚
    💚
    2023-03-31

    你好，请问解决了吗？我也遇到了同样的问题

    2023-03-31
    有用
    回复
  • 诺诺
    诺诺
    2022-09-30

    2022年九月三十号。遇到了楼主一模一样的问题，该怎么解决呢？

    2022-09-30
    有用
    回复
  • 王盖安
    王盖安
    2022-08-22

    楼主请问解决了吗，我也遇到了同样的问题，安卓真机在绘制车辆轨迹的时候地图一闪一闪的，而且行驶轨迹歪歪扭扭，iOS真机就没有这个两个问题

    2022-08-22
    有用
    回复
  • 两度椿湫
    两度椿湫
    2022-07-20

    都两年了

    2022-07-20
    有用
    回复
  • 飘逸跑酷
    飘逸跑酷
    2022-04-09

    我遇到的问题更秀，是直接是地图内的地点图标信息一直在闪，就是基础使用

    <map
      name="recruit-map"
      class="map-container"
      longitude="{{info.position[0]}}"
      latitude="{{info.position[1]}}"
      markers="{{[marker]}}"
      enable-scroll="{{false}}"
      enable-zoom="{{false}}"
      style="height: 260rpx;"
    />
    2022-04-09
    有用
    回复 1
    • Hanshin
      Hanshin
      2022-07-27
      我也是一样的，部分机型，基础的使用就会闪，但又不是所有场景都闪。
      2022-07-27
      赞
      回复
  • 2021-07-09

    好像没有解决方案，实时更新运动轨迹也不断闪烁，makers也好，polyline也好，只支持数据整体更新，不支持局部更新，像类似这种写法是不生效的：

    let points = this.data.lines.length ? this.data.lines[0].points : []
let index = 'lines[0].points['+points.length+']'
this.setData({
  [index]: {longitude: 121.34, latitude: 35.25}
})
    2021-07-09
    有用
    回复

正在加载...

请 登录 后发表内容
相关问题
相关文档