javascript - Angular 传单图标不会相互替换，而是重叠

Question

在我的 ngOnInit 上，我初始化了一些东西，例如 map 上的标记。最初它们都使用相同的图标进行初始化。每当我选择一个标记时，我希望它更改为“选定的图标”。然而，这里的问题是我的程序没有用新图标替换旧图标。相反，它只是将图标添加到当前图标的顶部，每当我选择第二个标记并尝试清除最近选择的标记时，什么也不会发生(因为两个图标只是重叠)。

vehicleDetails: VehicleDetail[]; //array contains a bunch of VehicleDetail's.

 // markers with vehicle IDs
markerAdv = Leaflet.Marker.extend({
    options: {
      vehicleId: ''
    }
  });
markers = new this.markerAdv();


  // Set the icons across the map.
  setMarkers(id: number) {
    for (let i = 0; i < this.vehicleDetails.length; i++) {
        // Creating the markers
        this.markers = new this.markerAdv(
          [
            this.vehicleDetails[i].position.latitude,
            this.vehicleDetails[i].position.longitude
          ],
          {
            icon: this.myBlueIcon,
            vehicleId: this.vehicleDetails[i].id
          }
        )
          .addTo(this.map)
          .bindPopup(`${this.vehicleDetails[i].name} : ${status}  `)
          .on('mouseover', function(e) {
            this.openPopup();
          })
          .on('mouseout', function(e) {
            this.closePopup();
          })
          .on(
            'click',
            function(event) {
              this.updateInfo(event.target.options.vehicleId);
            },
            this
          );
        // Highlighting the marked vehicle
        if (id === this.vehicleDetails[i].id) {
          this.markers.setIcon(this.myBlueSelectedIcon);
        } else {
          this.markers.setIcon(this.myRedIcon);
        }
      }
    }
  }

我该怎么做才能避免这种重叠问题，并在选择/清除图标时替换图标？

Answer 1

根据我的评论:当您将标记附加到传单 map 时，它只会附加它们:它不会删除它们。

如果您想删除它们，则必须手动执行。

这是通过跟踪您的标记并根据命令删除它们来完成的。

最好的跟踪器(当你有东西来识别你的标记时)，是使用 map :

markers: Map<number, Leaflet.Marker> = new Map();