Vue+Leaflet：让marker(小车)在地图上动起来

一，没有航向角，利用leaflet的原生api

    showTraceClick() {
        //删除marker
      if (this.Marker) {
        this.map.removeLayer(this.Marker);
      }
      var carIcon = L.icon({
        iconUrl: car,
        iconSize: [15, 24],
        iconAnchor: [12, 20],
        popupAnchor: [0, 0],
      });

        //初始化marker
      this.Marker = L.marker(this.latlngs[0], {
        icon: carIcon,
      }).addTo(this.map);

      var i = 0;
        //每隔一段时间重新设置marker的经纬度
      this.timer = setInterval(() => {
        i += 1;
        this.Marker.setLatLng(this.latlngs[i]);
        if (i == this.latlngs.length - 1) {
          clearInterval(this.timer);
        }
      }, this.time);
    },

二，带航向角，利用leaflet.animatedMarker插件中的animatedMarker.pushPosition()

    showTraceClick() {
      if (this.animatedMarker) {
        this.map.removeLayer(this.animatedMarker);
      }
      var carIcon = L.icon({
        iconUrl: car,
        iconSize: [20, 15],
        iconAnchor: [19, 13],
      });
      this.animatedMarker = L.animatedMarker(
        { lat: this.latlngs[0][0], lng: this.latlngs[0][1] },
        {
          icon: carIcon,
        }
      ).addTo(this.map);
      var i = 0;
      this.timer = setInterval(() => {
        i += 1;
        this.animatedMarker.pushPosition(
          { lat: this.latlngs[i][0], lng: this.latlngs[i][1] },
          null
        );

        this.animatedMarker
          .bindPopup(
            `<br>纬度:${this.latlngs[i][0].toFixed(3)}，
            经度:${this.latlngs[i][1].toFixed(3)}</br><br>速                                
度:${this.speedList[i].toFixed(3)}，里程:${this.mileageList[i].toFixed(3)}</br>`
          )
          .openPopup();
        if (i == this.latlngs.length - 1) {
          clearInterval(this.timer);
        }
      }, this.time);
    },