Opmerking Dit project moet worden uitgevoerd op een apparaat, iOS of Andriod

Achtergrond:

Ik had de native google maps-plug-in in mijn ionic 2-project geïnstalleerd met behulp van de opdracht
$ 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"
zoals weergegeven in de volgende link: http://ionicframework.com/docs/v2/ native/google-maps/

Dan zou ik het commando $ ionic platform add ios . uitvoeren
en dan $ ionic build ios

Alles gaat zoals verwacht tot nu toe.
Wanneer ik een kaart probeer weer te geven, zie ik een zwart scherm, ik weet niet wat er ontbreekt!

Code:

/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>

Kan iemand alstublieft helpen bij het uitzoeken van het probleem. Uw hulp wordt zeer op prijs gesteld.

Link naar documentatie

Link naar projectrepo

Antwoord 1

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

MapPage is een gewone typoscript-klasse. Het is geen onderdeel en het zal geen levenscyclushaken op deze manier uitvoeren:

 ngAfterViewInit() {
    this.loadMap();
  }

Ook de aanroep map.loadMap() in App.html werkt niet omdat je element zich in home component bevindt.

Ik stel voor dat u kaartgerelateerde code verplaatst naar thuiscomponent.
Gebruik ook viewChild om de map div te krijgen, wat een ElementRef object.

Thuiscomponent

  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
  }
}

Hoekdocumentatiereferentie: https://angular.io/docs/ts/latest/ gids/

Antwoord 2

Voeg in app.scss toe:

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

Antwoord 3

Probleem: het laden van de kaart op het iOS-platform werkte niet. Het toonde een zwart scherm. Het kaartverzoek werd echter correct geüpdatet op de Google-console.

Oplossing: ik moest de volgende code toevoegen aan het .scss-bestand –

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

Dit werkte en laadde de kaart correct.

Antwoord 4

Mijn oplossing was: initialiseer de kaart niet op de constructor, maar initialiseer deze op de ionViewDidLoad.

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