空离子含量与谷歌地图 - Ionic2

Question

我在ionic2中开发了一个页面，以处理google map.但我的离子内容显示无。我的 html 页面包含以下代码。

<ion-header>
    <ion-navbar>
        <ion-title>{{text.title}}</ion-title>
    </ion-navbar>
</ion-header>

<ion-content>
  <div #map id="map"></div>  
</ion-content>

当我的 ts 文件包含。

import { Component, ViewChild, ElementRef } from '@angular/core';
import { NavController, AlertController } from 'ionic-angular';
import { Recosh } from '../../providers/recosh';

declare var google;

@Component({
    selector: 'page-search',
    templateUrl: 'search.html'
})
export class SearchPage {

  @ViewChild('map') mapElement: ElementRef;
  map: any;
    text: any;

  constructor(public navCtrl: NavController, public recoshService: Recosh, public alertCtrl: AlertController) {
        this.text = {
            title   :   this.recoshService.getMessage(1),
        }
  }

  ionViewLoaded(){
    this.loadMap();
  }

  loadMap(){
    console.log("loading maps...");
    let latLng = new google.maps.LatLng(-34.9290, 138.6010);

    let mapOptions = {
      center: latLng,
      zoom: 15,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    }

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

  }
}

和 src/index.html 也有以下一行。

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

当我启动ionic2项目时 ionic serve )，而加载页面的地图却没有显示。

在google APIs上创建的key没有任何限制，而且是用我的活动API Google Maps JavaScript API完成的。

我想这是一个API的问题，所以我添加了所有以下。

 Google Maps Android API
 Google Maps Directions API
 Google Maps Geocoding API
 Google Maps Geolocation API
 Google Maps JavaScript API
 Google Maps SDK for iOS
 Google Places API for Android
 Google Places API for iOS
 Google Places API Web Service

但我的页面仍然没有显示任何地图。

奇怪的是，我的console.log中的loadMap()函数并没有显示在我的web浏览器（chrome）的控制台中，所以似乎loadMap根本没有被调用......

事实上，在我的应用程序中存在一些警告，但它们在进入页面之前就出现了。

Answer 1

只要把地图组件放在离子内容外面就可以了

<ion-header>
<ion-navbar>
    <ion-title>{{text.title}}</ion-title>
</ion-navbar>
</ion-header>

<ion-content></ion-content>

<div #map id="map"></div>