Google与ionic的地图集成导致无错误的空白屏幕

Question

我正在尝试将google maps添加到我的网络应用程序中，但没有失败，我设法得到了一个空白屏幕，并且使事情更糟，没有错误！到目前为止，这是我的代码。我觉得这可能与mapElement有关，但是我的打字稿知识太差了，我在网上找不到任何东西似乎起作用

import { Component, OnInit, ViewChild, ElementRef } from '@angular/core';

@Component({
  selector: 'app-google-maps',
  templateUrl: './google-maps.component.html',
  styleUrls: ['./google-maps.component.scss'],
})
export class GoogleMapsComponent implements OnInit {
  @ViewChild('map', { static: false }) mapElement: ElementRef;

  text: string;
  map: any;
  constructor() {
    this.text = "hello World"
  }

  initMap() {
    let coords = new google.maps.LatLng(45, 100);
    let mapOptions: google.maps.MapOptions = {
      center: coords,
      zoom: 20,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    }
    this.map = new google.maps.Map(this.mapElement.nativeElement, mapOptions);
  }


  ngAfterContentInit() {
    this.initMap();
  }

  ngOnInit() {

  }



}

然后尝试使用events.html中的组件

<ion-header>
  <ion-toolbar color = "primary">
    <ion-title>Events</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>
<app-google-maps></app-google-maps>
</ion-content>

任何帮助将不胜感激！

Answer 1

请通过以下URL：

https://stackoverflow.com/a/57405762/5251807

似乎您尚未设置div容器的高度和宽度。