Javascript 爱奥尼亚3谷歌地图不显示在桌面浏览器上_Javascript_Google Maps_Ionic Framework_Ionic3

Javascript 爱奥尼亚3谷歌地图不显示在桌面浏览器上

javascript google-maps ionic-framework

Javascript 爱奥尼亚3谷歌地图不显示在桌面浏览器上,javascript,google-maps,ionic-framework,ionic3,Javascript,Google Maps,Ionic Framework,Ionic3,我一直试图在本地浏览器上显示谷歌地图，但屏幕似乎是空的我感觉地图在后端加载，但没有显示我可以看到地图光标在我的代码，index.html文件中，我提到了mapsapi <body>  <ion-app></ion-app> <script src="https://maps.google.com/maps

我一直试图在本地浏览器上显示谷歌地图，但屏幕似乎是空的

我感觉地图在后端加载，但没有显示

我可以看到地图光标

在我的代码，

index.html

文件中，我提到了

mapsapi

<body>

  <!-- Ionic's root component and where the app will load -->
  <ion-app></ion-app>

  <script src="https://maps.google.com/maps/api/js?key=AIzaSyCToBv6QzLZWTuqHa7aPeHn6KCCy-nuwKk"></script>

和

.ts

文件，代码库如下所示：

declare var google;

@IonicPage()
@Component({
  selector: 'page-map',
  templateUrl: 'map.html',
})
export class MapPage {

  @ViewChild('map') mapRef : ElementRef;

  map : any;

  game : any;

  currentTournamentData : any;

  location : any;

  constructor(private navCtrl: NavController, private navParams: NavParams,
    private eliteApi : EliteApi,private platform : Platform) {
    this.showMap();
  }

  ionViewDidLoad() {
    this.game = this.navParams.data;
    this.currentTournamentData = this.eliteApi.getCurrentTournamentData();
    this.location = this.currentTournamentData.locations[this.game.locationId];
  }

  showMap() {   
    this.platform.ready().then(() => {
        var latLng = new google.maps.LatLng(-34.9290, 138.6010);
        var mapOptions  = {
            center : latLng,
            zoom : 15,
            mapTypeId : google.maps.MapTypeId.ROADMAP
        };

        this.map = new google.maps.Map(this.mapRef.nativeElement, mapOptions);
    });
  }

}

控制台上没有错误，但没有运气

请帮助。

< P>试着用空白模板，找出引起问题的原因。删除

@IonicPage（）

，它就能完美地工作。

有时候，最好从头开始。

试试

this.map=new google.maps.map（this.mapRef.nativeElement，mapOptions）尝试过，没有运气：（@hrdkisback@StrugglingCoder，能否请您使用新代码更改再次编辑问题try以放置此方法this.showMap（）；
调用构造函数@PareshGami已更改它。请参阅。
declare var google;

@IonicPage()
@Component({
  selector: 'page-map',
  templateUrl: 'map.html',
})
export class MapPage {

  @ViewChild('map') mapRef : ElementRef;

  map : any;

  game : any;

  currentTournamentData : any;

  location : any;

  constructor(private navCtrl: NavController, private navParams: NavParams,
    private eliteApi : EliteApi,private platform : Platform) {
    this.showMap();
  }

  ionViewDidLoad() {
    this.game = this.navParams.data;
    this.currentTournamentData = this.eliteApi.getCurrentTournamentData();
    this.location = this.currentTournamentData.locations[this.game.locationId];
  }

  showMap() {   
    this.platform.ready().then(() => {
        var latLng = new google.maps.LatLng(-34.9290, 138.6010);
        var mapOptions  = {
            center : latLng,
            zoom : 15,
            mapTypeId : google.maps.MapTypeId.ROADMAP
        };

        this.map = new google.maps.Map(this.mapRef.nativeElement, mapOptions);
    });
  }

}