Vue中使用高德地图实现单人实时轨迹(方式一)--点标记方式闪动

#Vue中使用高德地图实现单人实时轨迹(方式一)

思路：要想实现人员实时效果那么第一种简单的思路就是，点标记的一闪一闪效果，用轮询或者webscoket不断从后台获取坐标数据，清理点标记，在绘制点标记。

如果你还不知道如何引入和配置高德地图请参考本人博客：https://lbs.amap.com/api/javascript-api/example/marker/replaying-historical-running-data

data中的数据

      h3tit: "人员轨迹",
      timer: null,//单人定时
      manyTime:null,//多人实时
      markerSpeed: 200,
      speedCount: 1,
      pName:'---',
      lineArr: [
        [116.478935, 39.997761],
        [116.478939, 39.997825],
        [116.478912, 39.998549],
        [116.478912, 39.998549],
        [116.478998, 39.998555],
        [116.478998, 39.998555],
        [116.479282, 39.99856],
        [116.479658, 39.998528]
      ],
      marker: {},
      map: {},
      markers:[],//点的集合  用来清除点标记
      firstArr: [120.11296645567579, 30.290059843858472],
      polyline: {},
      passedPolyline: {},

methods中的方法：

首先 发送请求给后端得到数据，用轮询的方法获取实时数据调用this.addPositiionSingle(val)

   //添加点标记
    addPositiionSingle(data) {
      this.marker = new AMap.Marker({
        map: this.map,
        position: [Number(data.lng), Number(data.lat)],
        icon: pic,
        offset: new AMap.Pixel(0, 0),
      });
      this.marker.setTitle(`${data.person_name}`);
      this.marker.setLabel({
        offset: new AMap.Pixel(50, 0), //设置文本标注偏移量
        content: `<div class='info'>${data.person_name}</div>`, //设置文本标注内容
        direction: "top" //设置文本标注方位
      });
      this.marker.setMap(this.map);
    },
    
    

**其次：**在每次请求的成功之后清除点标记，然后在绘制点标记

  //移出点标记
    removemarker() {
      if (this.marker) {
            this.marker.setMap(null);
            this.marker = null;
        }
    },

**最后：**别忘了清除定时

  beforeDestroy() {
    if (this.timer) {
      clearInterval(this.timer);
      this.timer = null;
    }
  },