用谷歌地图清空离子含量 - Ionic2

Question

我正在开发ionic2中的页面以处理谷歌地图。 但我的离子含量没有显示。我的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 API上创建的密钥没有任何限制，它是使用我的有效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

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

奇怪的是我的loadMap（）函数中的console.log没有显示在我的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>