更改选项时，Angular google地图未重新加载

Question

我正在尝试创建一个angular应用程序与角度护目镜地图组件。我的应用程序有一个暗光主题切换器。我已经创建了两种地图样式--一种是深色主题的夜色样式，另一种是浅色主题的轻色样式。当主题更改时，我更新地图选项以根据主题选择更改地图id。但是，它不会反映在贴图外观中。我的地图标记没问题。因此，我没有在这里添加这部分代码。另外，请注意，我在下面的代码中屏蔽了我的地图in。

我的地图组件ts

 @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;
  }

html

<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>

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

Answer 1

这可能是Angular不触发更改检测的问题，因为每次this.options更改时，变量引用都不会更改。因此，angular认为它是相同的值。

试一试

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,
    }

在创建原始this.options的副本时，以es6的方式更改对变量的引用。