收藏
回答

地图poyline 动态加载动画效果一直闪烁?

刚开始是一条绿色的线

想要匀速走过的轨迹线变成红色

但是轨迹线动态加载时一直在闪烁

js

// 全屏地图路线图并动画移动
var ii = 0
var timer = ''
// 坐标集合
let points = [{
    longitude106.5538,
    latitude29.50401,
  },
  {
    longitude106.553907,
    latitude29.499472,
  },
  {
    longitude106.556354,
    latitude29.487089,
  },
  {
    longitude106.555667,
    latitude29.485053,
  },
  {
    longitude106.553285,
    latitude29.476311,
  },
  {
    longitude106.550131,
    latitude29.473864,
  },
  {
    longitude106.540174,
    latitude29.468932,
  },
  {
    longitude106.536183,
    latitude29.469941,
  },
  {
    longitude106.531312,
    latitude29.469212,
  },
  {
    longitude106.526527,
    latitude29.471043,
  },
  {
    longitude106.524317,
    latitude29.47207,
  },
  {
    longitude106.524253,
    latitude29.471939,
  },
// 轨迹点  . . . 
];
Page({
  data: {
    markers: [], // 标记点集合
    polyline: [], // 坐标点集合
    satellitefalse// 是否开启卫星图
    i0
  },
  onReadyfunction () {
    this.mapCtx = wx.createMapContext('map'); // 创建 map 上下文 MapContext 对象
  },
  start() {
    let that = this;


    clearInterval(timer)
    ii = 0
    this.setData({
      polyline: [{
        points: points,
        color"#14C556",
        width5
      }],
      // markers:markers,
      longitude106.587891,
      latitude29.544862,
    })
    timer = setInterval(() => {
      ii = ++ii
      if (ii == points.length - 1) clearInterval(timer)
      that.translateMarker()
    }, 500);
  },
  onLoadfunction () {
    let that = this;
    this.start()
  },
  // 平移marker,带动画
  translateMarkerfunction (markers{
    let that = this;
    var passedpoint = [];
    if (ii > 0) {
      for (var pointsindex = 0; pointsindex <= ii; pointsindex++) {
        passedpoint.push(points[pointsindex]);
      }
      let {
        polyline
      } = that.data
      polyline.push({
        points: passedpoint,
        color"#FF0000DD",
        width3,
        arrowLinetrue
      });
      that.setData({
        polyline
      })
    }
  },
})

wxml

<button bindtap="start">开始</button>
<view class="container">
  <map id="map" longitude="{{longitude}}" latitude="{{latitude}}" scale="12" markers="{{markers}}" polyline="{{polyline}}" enable-satellite="{{satellite}}" show-location style="width: 100%; height: 100vh;"></map>
回答关注问题邀请回答
收藏

2 个回答

  • 雾林
    雾林
    2021-04-27

    很久之前的问题了, 一直没有解决, 同种情况的还有 marker 的动态更新, 每次更新都会重新渲染地图, 属于官方问题了, 而且 这个东西高频更新的话 地图还会残留 旧的图案

    2021-04-27
    有用
    回复
  • 星落
    星落
    2021-04-06

    在线求解

    2021-04-06
    有用
    回复 1
登录 后发表内容
问题标签