谷歌原生地图不适用于离子3

Question

I have followed Google native maps for ionic 3 but came across a typo

ERROR Error: Uncaught (in promise): TypeError: Cannot read property 'BaseArrayClass' of null

Searched a lot on above error but could not find relevant answers. I am using *Angular4 with ionic 3 * .

app.module.ts

 import { BrowserModule } from '@angular/platform-browser'; import { ErrorHandler, NgModule } from '@angular/core'; import { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular'; import { MyApp } from './app.component'; import { HomePage } from '../pages/home/home'; import { ListPage } from '../pages/list/list'; import { StatusBar } from '@ionic-native/status-bar'; import { SplashScreen } from '@ionic-native/splash-screen'; import {GoogleMaps} from '@ionic-native/google-maps'; @NgModule({ declarations: [ MyApp, HomePage, ListPage ], imports: [ BrowserModule, IonicModule.forRoot(MyApp), ], bootstrap: [IonicApp], entryComponents: [ MyApp, HomePage, ListPage ], providers: [ StatusBar, SplashScreen, GoogleMaps, {provide: ErrorHandler, useClass: IonicErrorHandler} ] }) export class AppModule {} 

home.html

 <ion-header> <ion-navbar> <button ion-button menuToggle> <ion-icon name="menu"></ion-icon> </button> <ion-title>Google Maps</ion-title> </ion-navbar> </ion-header> <ion-content padding> <div id="map"></div> </ion-content> 

home.ts

 import { GoogleMaps, GoogleMap, GoogleMapsEvent, GoogleMapOptions, LatLng, CameraPosition, MarkerOptions, Marker } from '@ionic-native/google-maps'; import { Component } from '@angular/core'; import { Platform, NavController } from 'ionic-angular'; @Component({ selector: 'page-home', templateUrl: 'home.html' }) export class HomePage { map: GoogleMap; mapElement: HTMLElement; constructor(public navCtrl: NavController, private googleMaps: GoogleMaps, public platform: Platform) { // Wait the native plugin is ready. platform.ready().then(() => { this.loadMap(); }); } ionViewDidLoad() { this.loadMap(); } loadMap() { this.mapElement = document.getElementById('map'); let mapOptions: GoogleMapOptions = { camera: { target: { lat: 43.0741904, lng: -89.3809802 }, zoom: 18, tilt: 30 } }; this.map = this.googleMaps.create(this.mapElement, mapOptions); // Wait the MAP_READY before using any methods. this.map.one(GoogleMapsEvent.MAP_READY) .then(() => { console.log('Map is ready!'); // Now you can use all methods safely. this.map.addMarker({ title: 'Ionic', icon: 'blue', animation: 'DROP', position: { lat: 43.0741904, lng: -89.3809802 } }) .then(marker => { marker.on(GoogleMapsEvent.MARKER_CLICK) .subscribe(() => { alert('clicked'); }); }); }); } } 

Added a error screenshot

Answer 1

I have the same problem in my application. I don't know if this is the best shape but for me resolve for now. (sorry, my english is not very good rsrs).

So try change this:

this.googleMaps.create(this.mapElement, mapOptions);

For this:

this.map = new GoogleMap(this.mapElement, mapOptions);

EDITED
I found a new solution for the problem. You need do downgrade the version of the @ionic-native/google-maps in package.json and execute npm update command.

Its possible that problem occours because a bug in the new version. The version that I use in my project is 4.2.1