更新后，Google 地图标记不会被替换

如何解决更新后，Google 地图标记不会被替换

我一直在此处和 Google Maps API 文档中尝试各种代码块，但仍然无法弄清楚如何在重新初始化地图时隐藏以前的标记。

这是我当前使用的代码。我在这里从“Firestore”的可观察服务中获取 Marker 对象。一旦为用户更新了地理点，此服务将获取更新的标记，并且地图上的标记也将设置为更新。现在的问题是一旦标记更新后初始化地图，之前位置的标记不会从地图中删除。

@Component({
  selector: "app-map",templateUrl: "./map.component.html",styleUrls: ["./map.component.css"]
})
export class MapComponent implements AfterViewInit,OnInit {
    ngOnInit(): void {
       this.spinner.show();
 }

 @ViewChild("mapContainer",{ static: false }) gmap: ElementRef;

 defaultCenter = new google.maps.LatLng(40.7127753,-74.0059728);
 mapOptions: google.maps.MapOptions = {
   center: this.defaultCenter,zoom: 8
 };
 private map: any = google.maps.Map;
 markers = [];
 interpreters = [];
 markersMap: Map<String,google.maps.Marker> = new Map();
 focusedInterpreter: any;

 constructor(private interpreterService : InterpreterService,private spinner: NgxSpinnerService) {}

 ngAfterViewInit(): void {

   let isRefresh = false;
   this.interpreterService.getInterpreterMarkers().subscribe(userMarkers => {
       this.interpreters = userMarkers;
       userMarkers.forEach(markerInfo => {  
          let marker = this.createGoogleMarker(markerInfo);  
          isRefresh = this.resolveMarker(marker);
       });
       this.updateMarkers();
    });
  }

  createGoogleMarker(markerInfo : Marker): any {
    let marker = { 
        title: markerInfo.name,position: new google.maps.LatLng(Number(markerInfo.latitude),Number(markerInfo.longitute),false),map: this.map,animation: google.maps.Animation.DROP,icon: markerInfo.type == 'http://maps.google.com/mapfiles/ms/icons/blue-dot.png',id: markerInfo.id
   }
    return marker;
  }

  resolveMarker(marker): boolean {
    if (this.markersMap.has(marker.id)) {
        this.markersMap.delete(marker.id);
        this.markersMap.set(marker.id,marker);
        return true;
    } else { 
        this.markersMap.set(marker.id,marker);
        return true;
    }
 }

  updateMarkers(): void { 
      this.markers.splice(0,this.markers.length);
      this.markersMap.forEach((value: any,key: String) => {
      this.markers.push(value);
    });
   this.mapInitializer();
  }

  mapInitializer(): void {
    if (this.focusedInterpreter == null) {
      this.map = new google.maps.Map(this.gmap.nativeElement,this.mapOptions);
      this.loadAllMarkers();
    } else {
      let position = new google.maps.LatLng(this.focusedInterpreter.latitude,this.focusedInterpreter.longitute);
      this.map.setCenter(position);
      this.loadAllMarkers();
    }
  }

  loadAllMarkers(): void { 
    this.clearOverlays();
    this.markers.forEach(markerInfo => {
      const marker = new google.maps.Marker({
        ...markerInfo
      });
      const infoWindow = new google.maps.InfoWindow({
        content: marker.getTitle() + " (" + markerInfo.id + ")"
     });

     marker.addListener('mouseover',function() {
       infoWindow.open(marker.getMap(),marker);
     });
     marker.addListener('mouseout',function() {
       infoWindow.close();
     });
     marker.setMap(this.map);
   });
   this.spinner.hide();
 }

  clearOverlays() {
    for (var i = 0; i < this.markers.length; i++ ) {
        console.log(this.markers[i]);
        this.markers[i].setMap(null);
    }
  }


  focusOnLocation(event): void {
   let position = new google.maps.LatLng(event.latitude,event.longitute);
    this.map.setCenter(position);
    this.focusedInterpreter = event;
  }
}

现在正如一些答案所建议的那样，我使用 clearOverlays() 函数来循环标记并将地图设置为空。但是得到 ERROR TypeError: this.markers[i].setMap is not a function。

知道这里出了什么问题。

这是问题的图片。