Блог

Главная - Вопросы по программированию - Угловые карты Google не перезагружаются при изменении параметров

Угловые карты Google не перезагружаются при изменении параметров

#angular #google-maps

Вопрос:

Я пытаюсь создать угловое приложение с компонентами angular goggle maps. В моем приложении есть переключатель темных и светлых тем. Я создал два стиля карты — ночной стиль для темной темы и светлую версию для светлой темы соответственно. Когда тема меняется, я обновляю параметры карты, чтобы изменить идентификатор карты в соответствии с выбранной темой. Но это не отражается на внешнем виде карты. Мои маркеры на карте в порядке. Поэтому я не добавил сюда эту часть кода. Кроме того, пожалуйста, обратите внимание, что я замаскировал свои идентификаторы карты в приведенном ниже коде.

Мои карты компонент 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>

Что я делаю не так? Или это какая-то проблема с компонентами карт?

Комментарии:

1. Вы пытались запустить обнаружение изменений после установки параметров в this.options ? angular.io/api/core/…

2. @RomanA. Я пробовал ниже, но безрезультатно. this.themingSubscription = this.themingService.theme.subscribe((тема: строка) => { this.setMapOptions(); this.ref.DetectChanges(); });

Ответ №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,
    }

Выполнение этого способом es6 изменяет ссылку на переменную, поскольку она создает копию оригинала this.options .

Метки: