谷歌本地地图在Ionic 3中无法正常工作

Question

我已经按照Ionic 3的Google原生地图进行了操作，但是遇到了一个错别字。

错误错误：未捕获（在承诺中）：类型错误：无法读取null的“BaseArrayClass”属性

我搜索了很多关于上述错误的信息，但没有找到相关的答案。我正在使用*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');
              });
          });

      });
  }
}

增加了错误截图

- md-5h04I3

---

需要更多的信息。 - Aluan Haddad

嘿，@AluanHaddad，我给我的问题添加了描述。 - md-5h04I3

Answer 1

我在我的应用程序中遇到了同样的问题。我不知道这是否是最好的解决方法，但对于我来说，现在已经解决了。（抱歉，我的英语不太好，哈哈）。

所以尝试改变这个：

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

这是为了：

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

编辑过的：

我找到了一个新的解决方案来解决这个问题。您需要在package.json中降低@ionic-native/google-maps的版本，并执行npm update命令。

可能是因为新版本中存在错误而导致问题发生。我在我的项目中使用的版本是4.2.1。

- Marcelo Rafael

---

@Marcelo Rafael，好的，我会尝试您的解决方案，并将更新相关内容。 - md-5h04I3

@BlueBells 我也是，显示白屏，地图没有渲染。 - md-5h04I3

你是如何运行你的应用程序的？在设备上还是在浏览器中？ - Marcelo Rafael

@MarceloRafael 我正在浏览器上运行我的应用程序！ - md-5h04I3

@md-5h04I3，你需要在设备上运行。 - Marcelo Rafael