Question

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

有人知道为什么吗？还是有什么我可以尝试的？

这是我的对话框HTML ...

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

这是我的对话框CSS ...

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

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

    $value =  User::whereIn('plan_id',['mprom03','mproy06'])
    ->leftJoin('locations as l', 'users.id', '=', 'l.user_id')
    ->leftJoin('abouts', 'users.id', '=', 'abouts.user_id')
    ->leftJoin('appearances', 'users.id', '=', 'appearances.user_id')
    ->leftJoin('sexes', 'users.id', '=', 'sexes.user_id')       
    ->select('users.*','appearances.age','appearances.weight','appearances.height','sexes.oral','sexes.size', DB::raw('ROUND(6371 * acos(cos(radians(' . $cordiante[0] . ')) * cos(radians(`latitude`)) * cos(radians(`longitude`) - radians(' . $cordiante[1] . ')) + sin(radians(' . $cordiante[0] . ')) * sin(radians(`latitude`)))) as distance'))

    ->orderByRaw('RAND()')->limit(20)->get();

Answer 1

如果未定义经纬度，则不会加载地图。这些值最初未设置，因此我对初始值进行了硬编码，并正确显示了地图。

角度材质对话框-AGM贴图

1 个答案: