我已在Google原生地图上查看了ionic 3,但遇到了拼写错误
错误错误:未捕获(承诺):TypeError:无法读取null的属性'BaseArrayClass'
在上述错误中进行了大量搜索,但找不到相关的答案。我正在将* Angular4与离子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');
});
});
});
}
}
添加了错误屏幕截图
我的申请中有同样的问题。我不知道这是否是最好的形状,但对我来说现在就解决。(对不起,我的英语不是很好rsrs)。
因此,尝试更改此:
this.googleMaps.create(this.mapElement, mapOptions);
为了这:
this.map = new GoogleMap(this.mapElement, mapOptions);
编辑
我找到了解决该问题的新方法。您需要在package.json中降级@ ionic-native / google-maps的版本并执行npm update命令。
由于新版本中存在错误,可能会出现此问题。我在项目中使用的版本是4.2.1
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句