Angular-google-maps: Bagaimana menyesuaikan ketinggian peta dengan ukuran layar

Saya membungkus tag AGM dalam dua elemen wadah

<div class="outer-wrapper">
  <div class="map-wrapper" id="wrapper" #wrapper>
    <agm-map
      [latitude]="latitude"
      [longitude]="longitude"
      [scrollwheel]="true"
      [zoom]="zoom"
      (idle)="idle()"
      (centerChange)="centerChange($event)"
      id="AgmMap"
      #AgmMap>
      <agm-marker 
         [latitude]="latitude"
         [longitude]="longitude"
         [markerClickable]="true"></agm-marker>
    </agm-map>
  </div>
</div>

Saya kemudian mengatur wadah luar menjadi 100%, wadah dalam ke ketinggian yang sewenang-wenang (tidak masalah),
dan elemen AGM menjadi 100% melalui CSS seperti ini.

.outer-wrapper {
  height: 100%;
  width: 100%;
  padding: 0;
  margin: 0;

  .map-wrapper {
    height: 400px;

    agm-map {
      height: 100%;
      width: 100%;
      margin: 0;
      padding: 0;
    }
  }
}

Saya kemudian menggunakan fungsi berikut dalam komponen untuk menangkap acara idle, centerChange, dan resize

@HostListener('window:resize')
  onWindowResize() {
    this.onResize();
  }

  ngAfterViewInit() {
    this.renderer.setElementStyle(
      this.wrapper.nativeElement, 'height',
      (window.innerHeight) + 'px'
    );
  }

  onResize() {
    // resize the container for the google map
    this.renderer.setElementStyle(
      this.wrapper.nativeElement, 'height',
      (window.innerHeight ) + 'px'
    );

    // recenters the map to the resized area.
    this.agmMap.triggerResize().then(() =>  
       this.agmMap._mapsWrapper.setCenter({lat: this.centerLat, lng: this.centerLng}));
  }

  // idle fires after paning or zooming is done. 
  // This is where we want to capture the center of the map.
  // This way if the user resizes, the center is preserved.
  idle() {
    this.centerLat = this.changeLat;
    this.centerLng = this.changeLng;
  }

// this event fires whenever any event changes the center. Panning, zooming, or resizing.
  centerChange(event: any) {
    if (event) {
      this.changeLat = event.lat;
      this.changeLng = event.lng;
    }
  }

Juga memiliki set variabel berikut:

@ViewChild('AgmMap') agmMap: any;
  @ViewChild('wrapper') wrapper: ElementRef;

public latitude: number;
  public longitude: number;
  private centerLat: number;
  private centerLng: number;
  public zoom: number;

  private changeLat: number;
  private changeLng: number;

Pastikan Anda menggunakan Renderer dari @angular/core serta HostListener

Hai,

Selamat siang.

Berfungsi untuk pengubahan ukuran, pertanyaan singkat, bagaimana saya mengatur ini pada pemuatan pertama? Saat halaman dimuat di browser web, untuk mengubah ukurannya agar sesuai dengan layar saat ini? Terima kasih.

Salam.
JJ

Lupakan :)