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