使用 Ionic 2 原生 google-maps 插件未显示 Google Map

Question

我试图在我的 Ionic 2 应用程序中嵌入谷歌地图，但地图没有显示。 我从https://ionicframework.com/docs/native/google-maps/获取了代码 这是我的代码：
home.html

<ion-content>
  <div id="map_canvas" class="map"></div>
  <button ion-button (click)="loadMap()"></button>
</ion-content>

home.ts

import {
  GoogleMaps,
  GoogleMap,
  GoogleMapsEvent,
  GoogleMapOptions,
  CameraPosition,
  MarkerOptions,
  Marker
} from '@ionic-native/google-maps';


@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {
map: GoogleMap;

  constructor(public navCtrl: NavController,
              public appService: AppService,
              public apiService: ApiService,
              public util: Util,
              private geolocation: Geolocation,
              private googleMaps: GoogleMaps
            ) {
  }

loadMap() {

    let mapOptions: GoogleMapOptions = {
      camera: {
        target: {
          lat: 43.0741904,
          lng: -89.3809802
        },
        zoom: 18,
        tilt: 30
      }
    };

    this.map = this.googleMaps.create('map_canvas', mapOptions);

    // Wait the MAP_READY before using any methods.
    this.map.one(GoogleMapsEvent.MAP_READY)
        .then(() => {
          console.log('Map is ready!');

          // Now you can use all methods safely.
          this.map.addMarker({
            title: 'Ionic',
            icon: 'blue',
            animation: 'DROP',
            position: {
              lat: 43.0741904,
              lng: -89.3809802
            }
          })
              .then(marker => {
                marker.on(GoogleMapsEvent.MARKER_CLICK)
                    .subscribe(() => {
                      alert('clicked');
                    });
              });

        });
  }

如前所述，我使用以下 2 个命令安装了插件：

ionic plugin add cordova-plugin-googlemaps
npm install --save @ionic-native/google-maps

当然，我指定了我的 Android 和 iOS API 密钥。

从package.json、@ionic-native/google-maps 版本 4.3.3 和 cordova-plugin-googlemaps 版本是 2.1.1

当我的页面加载时，我的 div 是空白的。当我触发小按钮加载地图时，我有一个控制台日志显示“地图已准备好”，没有错误，并且我的请求出现在 API 控制台上

没有地图的形状，没有 Google 徽标，只有一个空白屏幕，没有加载任何内容。

提前感谢您的帮助！

Answer 1

要将 Ionic Native 添加到您的应用中，请运行以下命令来安装核心包：

npm install @ionic-native/core --save

请记住，许多离子原生插件仅适用于 real device。如果你在 web 上运行，它将无法工作。

您可以check this up 了解有关在 ionic 2 中使用谷歌地图的更多信息。