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

Question

我正在尝试在我的 Ionic 2 应用程序中嵌入谷歌地图，但 map 未显示。我从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');
                    });
              });

        });
  }

如上所述，我使用这两个命令安装了插件:

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

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

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

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

没有 map 的形状，没有谷歌标志，只有一个空白屏幕，没有任何加载。

预先感谢您的帮助!

Answer 1

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

npm install @ionic-native/core --save

请记住，许多 ionic native 插件仅适用于 real device 。如果您在网络上运行，它将不起作用。

您可以check this up有关将 google map 与 ionic 2 一起使用的更多信息。