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

微信小程序地图动态加载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;
    }
  }
})




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

15 个回答

  • 飘逸跑酷
    飘逸跑酷
    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
    有用
    回复
  • 高康
    高康
    2020-10-26

    这个问题最后是怎么解决的呢？

    2020-10-26
    有用
    回复
  • anchovy
    anchovy
    2020-08-15

    请问这个问题解决了吗？

    2020-08-15
    有用
    回复
  • 吴俊伟
    吴俊伟
    2020-04-21

    解决了吗，我是绘制车辆历史轨迹，动态改变marker ， 也是一闪一闪的

    2020-04-21
    有用
    回复 2
    • CHY
      CHY
      2020-08-15
      请问解决了吗，我也遇到了同样的问题，在绘制车辆轨迹的时候一闪一闪的
      2020-08-15
      赞
      回复
    • 王盖安
      王盖安
      2022-08-22回复CHY
      请问解决了吗，我也遇到了同样的问题，安卓真机在绘制车辆轨迹的时候地图一闪一闪的，而且行驶轨迹歪歪扭扭，iOS真机就没有这个问题
      2022-08-22
      赞
      回复

正在加载...

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