Angular-google-maps: كيفية ملاءمة ارتفاع الخريطة لحجم الشاشة

أقوم بلف علامة AGM في عنصرين من الحاوية

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

ثم أقوم بضبط الحاوية الخارجية على 100٪ ، والحاوية الداخلية على ارتفاع تعسفي (لا يهم) ،
وعنصر AGM إلى 100٪ من خلال CSS مثل هذا.

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

  .map-wrapper {
    height: 400px;

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

ثم أستخدم الوظائف التالية في المكون لالتقاط أحداث الخمول ، والتغيير المركزي ، وتغيير حجم الأحداث

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

أيضا لديك مجموعة المتغيرات التالية

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

فقط تأكد من استخدام العارض من @ angular / core وكذلك HostListener

أهلا،

يوم جيد.

يعمل من أجل تغيير الحجم وسؤال سريع ، كيف يمكنني ضبط هذا عند التحميل الأول؟ عندما يتم تحميل الصفحة في متصفح الويب ، هل تريد تغيير حجمها لتناسب الشاشة الحالية؟ شكرا.

يعتبر.
جي

لا تهتم :)