PrimeNG 中的 Google 地图未呈现

Question

我想在我的组件中显示一个简单的 oogle 地图，并带有标记，我遵循了文档并从地图 api 获得 200 响应，但仍未呈现 这是 HTML（我在 index.html 中添加了 API 密钥）

<div class="p-field p-grid">
                <header>Map</header>
                <div>
                    <div class="p-col-12">
                        <p-gmap [style]="{'width':'100%','height':'320px'}" [options]="options" [overlays]="overlays"
                                (onMapClick)="handleMapClick($event)" (onOverlayClick)="handleOverlayClick($event)"></p-gmap>
                    </div>
                </div>
            </div>

这是组件 .ts 文件

declare var google: any;
@Component({
  templateUrl: './map.component.html'
})
export class MapComponent implements OnInit {
    markerTitle: string;
    selectedPosition: any;
    infoWindow: any;
ngOnInit(): void {this.options = {
          center: {lat: 36.890257, lng: 30.707417},
          zoom: 12
      };
      
      this.initOverlays();
      this.infoWindow = new google.maps.InfoWindow();
  }
initOverlays() {
        if (!this.overlays || !this.overlays.length) {
            this.overlays = [
                new google.maps.Marker({position: {lat: 36.879466, lng: 30.667648}, title: 'Konyaalti'})
                    ], strokeOpacity: 0.5, strokeWeight: 1, fillColor: '#1976D2', fillOpacity: 0.35
                }),
            ];
        }
    }
handleOverlayClick(event) {
        something!!!
    
}

Answer 1

**map.html**

<mat-divider></mat-divider>
<br>
<div class="container-fluid" >
  <p-panel header="Maps" >
    <mat-card >
      <mat-card-title ></mat-card-title>
      <p-gmap [options]="options"  [overlays]=" overlays" [style]="{'width':'99%','height':'322px'}" ></p-gmap>
    </mat-card>
  </p-panel>
</div>

**map.ts**

import {Component, OnInit, ViewChild} from '@angular/core';
import {OverlayPanel} from "primeng/overlaypanel";

declare var google: any;
@Component({
  selector: 'app-map',
  templateUrl: './map.component.html',
  styleUrls: ['./map.component.css']
})
export class MapComponent implements OnInit {
  options: any;

  overlays:any[];

  @ViewChild('op') op: OverlayPanel | undefined;
  constructor() { this.overlays=[];}
  display: boolean = false;
  showDialog() {
    this.display = true;}

  ngOnInit(): void {
    this.options = {
      center: {lat: 36.890257, lng: 30.707417},
      zoom: 12
    };
    const marker = new google.maps.Marker({position: {lat: 33.684422, lng: 73.047882}, title:"Konyaalti" });
    marker.addListener('click',(event:any)=>{
      // @ts-ignore
      this.op.toggle(event);
    })
    this.overlays = [
      new google.maps.Marker ({position: {lat: 36.883707, lng: 30.689216}, title:"Ataturk Park"}),
      new google.maps.Marker({position: {lat: 36.885233, lng: 30.702323}, title:"Oldtown"}),

    ];

  }


}