弹出框：popup

一，功能简介：popup跟随车辆在地图上移动，同时popup的内容显示车的经纬度和速度，以及行驶里程

二，核心代码如下：

    showTraceClick() {
      if (this.animatedMarker) {
        this.map.removeLayer(this.animatedMarker);
      }
      var carIcon = L.icon({
        iconUrl: car,
        iconSize: [20, 15],
        iconAnchor: [19, 13],
      });
      // this.Marker = L.marker(this.latlngs[0], {
      //   icon: carIcon,
      // }).addTo(this.map);
      this.animatedMarker = L.animatedMarker(
        { lat: this.latlngs[0][0], lng: this.latlngs[0][1] },
        {
          icon: carIcon,
        }
      ).addTo(this.map);

      var popup = L.popup({ autoPan: false }).setLatLng(this.latlngs[0]);
      this.animatedMarker.bindPopup(popup).openPopup();
      this.timer = setInterval(() => {
        this.i += 1;
        // this.Marker.setLatLng(this.latlngs[i]);
        this.animatedMarker.pushPosition(
          { lat: this.latlngs[this.i][0], lng: this.latlngs[this.i][1] },
          null
        );
        var popupContent = `<br>纬度:${this.latlngs[this.i][0].toFixed(
          3
        )}，经度:${this.latlngs[this.i][1].toFixed(
          3
        )}</br><br>速度:${this.speedList[this.i].toFixed(
          1
        )}，里程:${this.mileageList[this.i].toFixed(1)}</br>`;
        // popup.setLatLng(this.latlngs[this.i]);
        popup.setContent(popupContent);
        if (this.i == this.latlngs.length - 1) {
          clearInterval(this.timer);
        }
      }, this.time);
    },

三，效果截图