离子2空白谷歌地图

Question

我是离子2的新手。我尝试练习Integrating Native Google Maps into an Ionic 2 Application，但是当我在Android设备上运行app时，它会给出一张空白的谷歌地图，如下图所示。

home.ts页面是：

<ion-header>
  <ion-navbar>
    <ion-title>
      Ionic Blank
    </ion-title>
  </ion-navbar>
</ion-header>
<ion-content>
  <div id="map"></div>
</ion-content>

home.scss是：

.scroll {
height: 100%;
}
#map {
width: 100%;
height: 100%;
}
scroll-content._gmaps_cdv_{
background-color: transparent !important;
padding: 0px !important;
}
ion-app._gmaps_cdv_ .nav-decor{
  background-color: transparent !important;
}
home-page {
}

home.ts是：

import { Component } from '@angular/core';
import { NavController, Platform } from 'ionic-angular';
import { GoogleMap, GoogleMapsEvent, GoogleMapsLatLng } from 'ionic-native';
@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {
  map: GoogleMap;
  constructor(public navCtrl: NavController, public platform: Platform) {
    platform.ready().then(() => {
      this.loadMap();
    });
  }
  loadMap(){
    let location = new GoogleMapsLatLng(-34.9290,138.6010);
    this.map = new GoogleMap('map', {
      'backgroundColor': 'white',
      'controls': {
        'compass': true,
        'myLocationButton': true,
        'indoorPicker': true,
        'zoom': true
      },
      'gestures': {
        'scroll': true,
        'tilt': true,
        'rotate': true,
        'zoom': true
      },
      'camera': {
        'latLng': location,
        'tilt': 30,
        'zoom': 15,
        'bearing': 50
      }
    });
    this.map.on(GoogleMapsEvent.MAP_READY).subscribe(() => {
      console.log('Map is ready!');
    });
  }
}

我没有更改任何其他页面。

我的google开发者控制台API管理器是：

我不知道我错过了什么。

Answer 1

我通过删除iOS和Android密钥限制来解决问题。