它显示黑屏试图在设备上加载地图与离子2谷歌地图本地插件时

Question

注意该项目必须在设备上运行，iOS或安卓

背景：

我已经使用命令 $ 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" 将我的原生Google地图插件安装到了我的ionic 2项目中，如以下链接所示：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目录/页/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(); 
    } 

而且通话map.loadMap()在App.html不工作，因为你的元素是home component。

我建议你将地图相关的代码移动到家庭组件。 同样使用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 
    } 
} 

角文档参考：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) 

    }