尝试使用 ionic 2 Google Map Native 插件在设备上加载地图时显示黑屏

Question

注意此项目必须在设备上运行，iOS 或 Andriod

背景：

我已使用以下命令将原生谷歌地图插件安装到我的 ionic 2 项目中 $ ionic plugin add cordova-plugin-googlemaps --variable API_KEY_FOR_ANDROID="YOUR_ANDROID_API_KEY_IS_HERE" --variable API_KEY_FOR_IOS="YOUR_IOS_API_KEY_IS_HERE" 如以下链接所示：http://ionicframework.com/docs/v2/native/google-maps/

然后我会运行命令$ ionic platform add ios 然后$ ionic build ios

到目前为止，一切都按预期进行。 当我尝试显示地图时，我看到一个黑屏，不知道缺少什么！

代码：

/src/app/app.module.ts

import { NgModule, ErrorHandler } from '@angular/core';
import { IonicApp, IonicModule, IonicErrorHandler } from 'ionic-angular';
import { MyApp } from './app.component';

import { HomePage } from '../pages/home/home';

@NgModule({
  declarations: [
    MyApp,
    HomePage
  ],
  imports: [
    IonicModule.forRoot(MyApp)
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    HomePage
  ],
  providers: [{provide: ErrorHandler, useClass: IonicErrorHandler}]
})
export class AppModule {}

/src/app/app.component.ts

import { Component } from '@angular/core';
import { Platform } from 'ionic-angular';
import { StatusBar, Splashscreen } from 'ionic-native';

import { HomePage } from '../pages/home/home';

import {
  GoogleMap,
  GoogleMapsEvent,
  GoogleMapsLatLng,
  CameraPosition,
  GoogleMapsMarkerOptions,
  GoogleMapsMarker
  // GoogleMapsMapTypeId
} from 'ionic-native';

@Component({
  templateUrl: 'app.html'
})
export class MyApp {
  rootPage = HomePage;

  constructor(platform: Platform) {
    platform.ready().then(() => {
      // Okay, so the platform is ready and our plugins are available.
      // Here you can do any higher level native things you might need.
      StatusBar.styleDefault();
      Splashscreen.hide();

      let map = new MapPage();
      map.loadMap();
    });
  }
}

class MapPage {
  constructor() {}

// Load map only after view is initialize
  ngAfterViewInit() {
    this.loadMap();
  }

  loadMap() {
    // make sure to create following structure in your view.html file
    // and add a height (for example 100%) to it, else the map won't be visible
    // <ion-content>
    //  <div #map id="map" style="height:100%;"></div>
    // </ion-content>

    // create a new map by passing HTMLElement
    let element: HTMLElement = document.getElementById('map');

    let map = new GoogleMap(element);

    // create LatLng object
    let ionic: GoogleMapsLatLng = new GoogleMapsLatLng(43.0741904,-89.3809802);

    // create CameraPosition
    let position: CameraPosition = {
      target: ionic,
      zoom: 18,
      tilt: 30
    };

    // listen to MAP_READY event
    map.one(GoogleMapsEvent.MAP_READY).then(() => {
      // move the map's camera to position
      map.moveCamera(position); // works on iOS and Android
    });


    // create new marker
    let markerOptions: GoogleMapsMarkerOptions = {
      position: ionic,
      title: 'Ionic'
    };

    map.addMarker(markerOptions)
        .then((marker: GoogleMapsMarker) => {
          marker.showInfoWindow();
        });
  }
}

/src/pages/home/home.html

<ion-header>
  <ion-navbar>
    <ion-title>
      Ionic Blank
    </ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
  <div #map id="map" style="height:100%;"></div>
</ion-content>

有人可以帮忙解决这个问题吗？非常感谢您的帮助。

Link to documentation

Link to project repo

Answer 1

let map = new MapPage();
  map.loadMap();`

MapPage 是一个普通的打字稿类。它不是一个组件，它不会像这样运行生命周期钩子：

 ngAfterViewInit() {
    this.loadMap();
  }

另外，App.html 中的调用 map.loadMap() 也不起作用，因为您的元素位于 home component 中。

我建议您将地图相关代码移至home 组件。 还可以使用viewChild 来获取map div，这将是一个ElementRef 对象。

主页组件

  constructor() {}
@ViewChild('map')
  private mapElement: ElementRef;

// Load map only after view is initialize
  ngAfterViewInit() {
    this.loadMap();
  }

  loadMap() {

    let map = new GoogleMap(this.mapElement.nativeElement);

   //...etc etc
  }
}

Angular 文档参考：https://angular.io/docs/ts/latest/guide/

Answer 2

在 app.scss 中，添加：

ion-app._gmaps_cdv_ .nav-decor{
   background: none !important;
}

Answer 3

问题：在 iOS 平台上加载地图无法正常工作。它显示黑屏。但是，地图请求在 Google 控制台上正确更新。

解决方案：我必须在 .scss 文件中添加以下代码 -

ion-app._gmaps_cdv_ .nav-decor{
    display: none !important;
}

这可以正常工作并正确加载地图。

Answer 4

我的解决方案是，不要在构造函数上初始化地图，在 ionViewDidLoad 上初始化它。

ionViewDidLoad() {
    console.log('ionViewDidLoad Maps');
    setTimeout(()=>{
        this.loadMap();
    }, 1000)

  }