デバイス上に地図をロードしようとしたときにそれは

Question

イオン2 Googleマップネイティブプラグインを使用して、黒い画面を示し注、iOSのか、のAndriod

背景：

私は、以下のリンクに示すように、 $ 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" というコマンドを使用して、イオン2プロジェクトにネイティブgoogle mapsプラグインをインストールしました：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 project repo

Answer 1

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

MapPage

Link to documentationは、プレーンtypescriptですクラスです。これは、コンポーネントではありません、それは文句を言わない、このようなライフサイクルフックを実行します。また、あなたの要素がhome componentであるため、App.htmlでmap.loadMap()が動作していないコール

ngAfterViewInit() { 
    this.loadMap(); 
    } 

を。

地図関連のコードをホームコンポーネントに移動することをお勧めします。 また、ElementRefオブジェクトになるmap divを取得するにはviewChildを使用してください。

ホームコンポーネント

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) 

    }