Angular 当我更改选项时，角度谷歌地图不会重新加载

我正在尝试创建一个带有角度眼镜贴图组件的角度应用程序。我的应用程序有一个暗光主题切换。我已经创建了两种地图样式——分别用于黑暗主题的夜间样式和用于光明主题的浅色版本。当主题更改时，我会更新地图选项，以根据主题选择更改地图id。但是，它不会反映在地图外观中。我的地图标记还可以。因此，我没有在这里添加这部分代码。另外，请注意，我在下面的代码中屏蔽了我的地图ID

我的地图组件

 @Input() position: GeolocationPosition;

  public markers: any[] = [];
  public options: google.maps.MapOptions;
  public mapId: string;

  private darkModeKey: string = "dark-mode";
  public themingSubscription: Subscription;

  constructor(
    private httpClient: HttpClient,
    private secretsService: SecretsService,
    private themingService: ThemingService,
    private storageService: StorageService,
  ) { }

  ngOnInit(): void {
    this.setMapOptions();

    this.loadMarkers();

    this.themingSubscription = this.themingService.theme.subscribe((theme: string) => {
      this.setMapOptions();
    });
  }

  private setMapOptions()
  {        
    this.options = {
      center: {
        lat: this.position.coords.latitude,
        lng: this.position.coords.longitude
      },
      zoom: 14,
      mapId: this.storageService.getItemByKey(this.darkModeKey) ?
        <dark-map-id> :
        <light-map-id>,
      maxZoom: 30,
      minZoom: 5,
    } as google.maps.MapOptions;
  }

@Input（）位置：GeolocationPosition；
公共标记：任意[]=[]；
公共选项：google.maps.MapOptions；
公共mapId:字符串；
私有暗模式：string=“暗模式”；
公开主题订阅：订阅；
建造师(
私有httpClient:httpClient，
私人保密服务：保密服务，
私人主题服务：主题服务，
专用存储服务：存储服务，
) { }
ngOnInit（）：void{
这是setMapOptions（）；
这是loadMarkers（）；
this.themingSubscription=this.themingService.theme.subscribe（（主题：字符串）=>{
这是setMapOptions（）；
});
}
私有setMapOptions（）
{        
此选项={
中心：{
纬度：这个。位置。坐标。纬度，
lng:this.position.coords.longitude
},
缩放：14，
mapId:this.storageService.getItemByKey（this.darkModeKey）？
:
,
maxZoom:30，
minZoom:5，
}如google.maps.MapOptions；
}

html

---

我做错了什么？或者这是地图组件的问题？

这可能是角度未触发更改检测的问题，因为每次

此选项更改时，变量引用都不会更改。因此，angular认为其值相同

试一试

this.options={…this.options，
中心：{
纬度：这个。位置。坐标。纬度，
lng:this.position.coords.longitude
},
缩放：14，
mapId:this.storageService.getItemByKey（this.darkModeKey）？
:
,
maxZoom:30，
minZoom:5，
}

在创建原始
this.options
的副本时，以es6方式执行此操作会更改对变量的引用。在将选项设置为
this.options
后，您是否尝试运行ChangeDetection@罗曼娜。我试过下面的方法，但没有用。this.themingSubscription=this.themingService.theme.subscribe（（主题：字符串）=>{this.setMapOptions（）；this.ref.detectChanges（）；}）；谢谢但是，对我来说，它不起作用。
<div>
  <google-map [options]="options" [width]="700" [height]="500" >
    <map-marker *ngFor="let marker of markers" [position]="marker.position" [label]="marker.label"
      [title]="marker.title" [options]="marker.options"></map-marker>
  </google-map>
</div>

this.options = {...this.options,
      center: {
        lat: this.position.coords.latitude,
        lng: this.position.coords.longitude
      },
      zoom: 14,
      mapId: this.storageService.getItemByKey(this.darkModeKey) ?
        <dark-map-id> :
        <light-map-id>,
      maxZoom: 30,
      minZoom: 5,
    }