高德地图轨迹怎么看(高德地图实时轨迹mark平滑实时移动)

实时获取位置坐标,根据坐标的移动变化在页面中进行轨迹回放,以达到实时轨迹移动的效果,借鉴轨迹回放插件原理,每次获取位置上一次点和最新的点坐标,将其进行轨迹回放即可。

模拟三组位置坐标数据

    lineArr1: [
        [[125.282105,43.831389],[125.274981,43.831266]],
        [[125.244175,43.80368],[125.258251,43.80368]]
      ],
      lineArr2: [
        [[125.274981,43.831266],[125.271634,43.828851]],
        [[125.258251,43.80368],[125.283657,43.80368]]
      ],
      lineArr3: [
        [[125.271634,43.828851],[125.267771,43.827179]],
        [[125.283657,43.80368],[125.28709,43.80368]]
      ],
      lineArr: [[125.282105,43.831389],[125.244175,43.80368]
      ]
setTimeout(function (){
        map.clearMap();
        that.lineArr=that.lineArr1;
        for(var i=0;i<that.lineArr.length;i++){
          that.startAnimation(map,that.lineArr[i])
        }

      },2000)
      setTimeout(function (){
        map.clearMap();
        that.lineArr=that.lineArr2;
        for(var i=0;i<that.lineArr.length;i++){
          that.startAnimation(map,that.lineArr[i])
        }
      },5000)
      setTimeout(function (){
        map.clearMap();
        that.lineArr=that.lineArr3;
        for(var i=0;i<that.lineArr.length;i++){
          that.startAnimation(map,that.lineArr[i])
        }
      },8000)

通过定时器设置模拟获取数据,画最新的位置坐标,实现轨迹播放

 async startAnimation (map,lineArrs) {
      var that= this;
      AMap.plugin('AMap.MoveAnimation', function(){
        var marker;
        marker = new AMap.Marker({
          map: map,
          position:map.getCenter(),
          selectedClassNames: 'selected',
          autoRotation:false,
          offset: new AMap.Pixel(-34, -68),
          content:`<div style="position: relative"><div style="width:68px;height:68px;background: url(${that.bgphoto});background-size: 100%;transform: rotate(0);"></div><img style="position: absolute;width: 60%;left:20%;top:20%;" src=${that.photo}></div>`,
        }).on("click",function(e){
        });
        that.markers.push(marker);
        //map.setFitView();
        marker.moveAlong(lineArrs, {
          // 每一段的时长
          duration: 1000,//可根据实际采集时间间隔设置
          // JSAPI2.0 是否延道路自动设置角度在 moveAlong 里设置
          autoRotation: false,
        });
      });
    },

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 lqy2005888@qq.com 举报,一经查实,本站将立刻删除。