Angular Material 对话框 - AGM 地图

Question

我正在尝试创建一个 material 对话框以使用 AGM（angular google 地图）捕获用户位置。我的主页上有一个工作示例，但是当对话框打开时，它只会在地图应该显示的位置显示白色 space。当我更改 CSS 高度并且可以看到白色区域 growing/shrinking.

有谁知道为什么？或者有什么我可以尝试的吗？

这是我的对话 HTML...

<h1 mat-dialog-title>Where do you work?</h1>
<div mat-dialog-content>
  <mat-form-field>
    <input matInput placeholder="enter work location" autocorrect="off" autocapitalize="off" spellcheck="off" type="text" class="form-control" #search [formControl]="searchControl">
    <agm-map id="capture-work-map" [latitude]="coordinates.lat" [longitude]="coordinates.lng" [zoom]="zoom">
      <agm-marker [markerDraggable]="true" [latitude]="coordinates.lat" [longitude]="coordinates.lng"></agm-marker>
    </agm-map>
  </mat-form-field>
</div>
<div mat-dialog-actions>
  <button mat-button (click)="onNoClick()">Cancel</button>
  <button mat-button [mat-dialog-close]="coordinates" cdkFocusInitial>Update</button>
</div>

这是我的对话 CSS...

#capture-work-map {
  height: 300px;
}

TypeScript 对话框...

import {Component, ElementRef, Inject, OnInit, ViewChild} from '@angular/core';
import {MAT_DIALOG_DATA, MatDialogRef} from '@angular/material';
import {Coordinates} from '../model';
import {FormControl} from '@angular/forms';

@Component({
  selector: 'app-work-dialog',
  templateUrl: './work-dialog.component.html',
  styleUrls: ['./work-dialog.component.css']
})
export class WorkDialogComponent implements OnInit {
  @ViewChild('search') public searchElementRef: ElementRef;
  public searchControl: FormControl;
  private coordinates: Coordinates;
  constructor(
    public dialogRef: MatDialogRef<WorkDialogComponent>,
    @Inject(MAT_DIALOG_DATA) public data: Coordinates
  ) {}

  ngOnInit() {}

  onNoClick() {
    this.dialogRef.close();
  }
}

触发对话框打开的 TypeScript...

captureWorkLocation() {
    this.ngZone.run(() =>
      this.dialog.open(WorkDialogComponent, {
        width: '90vh', height: '90vh',
        data: this.user.work
      }).afterClosed().subscribe(result => {
        this.user.work = result;
      })
    );
  }

Answer 1

如果 lat/lng 未定义，则不会加载地图。这些值最初是未设置的，我是否硬编码了一个初始值并且地图显示正确。

Angular Material 对话框 - AGM 地图

Angular Material Dialog - AGM Map

javascript

css

typescript

angular-google-maps

angular