Angular Material 对话框 - AGM 贴图答案

【问题标题】：Angular Material Dialog - AGM MapAngular Material 对话框 - AGM 贴图
【发布时间】：2019-02-20 02:43:25
【问题描述】：

我正在尝试创建一个材质对话框以使用 AGM（角度谷歌地图）捕获用户位置。我的主页中有一个工作示例，但是当对话框打开时，它只显示地图应该在的空白区域。当我改变 CSS 高度并且可以看到白色区域在增长/缩小时。

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

这是我的对话框 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;
      })
    );
  }

【问题讨论】：

标签： javascript css angular typescript angular-google-maps

【解决方案1】：

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

【讨论】：