ionic 4 google-maps 5 beta "TypeError: Cannot read property 'BaseClass' of null"
ionic 4 google-maps 5 beta "TypeError: Cannot read property 'BaseClass' of null"
我正在尝试使用 ionic 4 google-maps@5.0.0-beta.20
我收到此错误:"TypeError: Cannot read property 'BaseClass' of null"
newlocation.page.html:
<ion-content>
<h3>Ionic GoogleMaps Starter</h3>
<div id="map_canvas">
</div>
</ion-content>
newlocation.page.scss:
map_canvas {
height: 90%;
}
newlocation.page.ts:
import { Component, OnInit } from '@angular/core';
import { Platform } from '@ionic/angular';
import { GoogleMaps, GoogleMap } from '@ionic-native/google-maps';
@Component({
selector: 'app-newlocation',
templateUrl: './newlocation.page.html',
styleUrls: ['./newlocation.page.scss'],
})
export class NewlocationPage implements OnInit {
map: GoogleMap;
constructor(private platform: Platform) { }
async ngOnInit() {
await this.platform.ready();
await this.loadMap();
}
loadMap() {
this.map = GoogleMaps.create('map_canvas');
}
}
package.json:
....
"@ionic-native/core": "5.0.0-beta.14",
"@ionic-native/google-maps": "^5.0.0-beta.20"
....
"cordova-plugin-googlemaps": {
"API_KEY_FOR_ANDROID": (API-KEY),
"PLAY_SERVICES_VERSION": "15.0.1",
"ANDROID_SUPPORT_V4_VERSION": "27.+"
}
在 Ionic V4 中,我们需要定义 loadMap() 方法异步调用,它将 return promise。
async ngOnInit() {
await this.platform.ready();
await this.loadMap()
}
我成功了,
我只删了'ion-content'让'div id="map_canvas"'一个人
我的信息:
package.json:
. . .
"@ionic-native/core": "5.0.0-beta.22",
"@ionic-native/google-maps": "5.0.0-beta.22",
. . .
<plugin name="cordova-plugin-googlemaps" spec="2.4.6">
<variable name="API_KEY_FOR_ANDROID" value="(YOUR-API-KEY)" />
<variable name="PLAY_SERVICES_VERSION" value="15.0.1" />
<variable name="ANDROID_SUPPORT_V4_VERSION" value="27.+" />
</plugin>
. . .
newlocation.page.html:
<div id="map_canvas"></div>
newlocation.page.scss:
map_canvas {
height: 90%;
}
newlocation.page.ts:
import { Component, OnInit } from '@angular/core';
import { GoogleMaps, GoogleMap } from '@ionic-native/google-maps';
@Component({
selector: 'app-newlocation',
templateUrl: './newlocation.page.html',
styleUrls: ['./newlocation.page.scss'],
})
export class NewlocationPage implements OnInit {
map: GoogleMap;
ngOnInit() {
this.loadMap();
}
loadMap() {
this.map = GoogleMaps.create('map_canvas');
}
}
newlocation.module.ts
import { GoogleMaps } from '@ionic-native/google-maps/ngx';
. . .
@NgModule({
providers: [GoogleMaps],
. . .
注意:对于网络,您必须使用 'ionic cordova run browser' 而不是 'ionic serve'
我正在尝试使用 ionic 4 google-maps@5.0.0-beta.20
我收到此错误:"TypeError: Cannot read property 'BaseClass' of null"
newlocation.page.html:
<ion-content>
<h3>Ionic GoogleMaps Starter</h3>
<div id="map_canvas">
</div>
</ion-content>
newlocation.page.scss:
map_canvas {
height: 90%;
}
newlocation.page.ts:
import { Component, OnInit } from '@angular/core';
import { Platform } from '@ionic/angular';
import { GoogleMaps, GoogleMap } from '@ionic-native/google-maps';
@Component({
selector: 'app-newlocation',
templateUrl: './newlocation.page.html',
styleUrls: ['./newlocation.page.scss'],
})
export class NewlocationPage implements OnInit {
map: GoogleMap;
constructor(private platform: Platform) { }
async ngOnInit() {
await this.platform.ready();
await this.loadMap();
}
loadMap() {
this.map = GoogleMaps.create('map_canvas');
}
}
package.json:
....
"@ionic-native/core": "5.0.0-beta.14",
"@ionic-native/google-maps": "^5.0.0-beta.20"
....
"cordova-plugin-googlemaps": {
"API_KEY_FOR_ANDROID": (API-KEY),
"PLAY_SERVICES_VERSION": "15.0.1",
"ANDROID_SUPPORT_V4_VERSION": "27.+"
}
在 Ionic V4 中,我们需要定义 loadMap() 方法异步调用,它将 return promise。
async ngOnInit() {
await this.platform.ready();
await this.loadMap()
}
我成功了,
我只删了'ion-content'让'div id="map_canvas"'一个人
我的信息:
package.json:
. . .
"@ionic-native/core": "5.0.0-beta.22",
"@ionic-native/google-maps": "5.0.0-beta.22",
. . .
<plugin name="cordova-plugin-googlemaps" spec="2.4.6">
<variable name="API_KEY_FOR_ANDROID" value="(YOUR-API-KEY)" />
<variable name="PLAY_SERVICES_VERSION" value="15.0.1" />
<variable name="ANDROID_SUPPORT_V4_VERSION" value="27.+" />
</plugin>
. . .
newlocation.page.html:
<div id="map_canvas"></div>
newlocation.page.scss:
map_canvas {
height: 90%;
}
newlocation.page.ts:
import { Component, OnInit } from '@angular/core';
import { GoogleMaps, GoogleMap } from '@ionic-native/google-maps';
@Component({
selector: 'app-newlocation',
templateUrl: './newlocation.page.html',
styleUrls: ['./newlocation.page.scss'],
})
export class NewlocationPage implements OnInit {
map: GoogleMap;
ngOnInit() {
this.loadMap();
}
loadMap() {
this.map = GoogleMaps.create('map_canvas');
}
}
newlocation.module.ts
import { GoogleMaps } from '@ionic-native/google-maps/ngx';
. . .
@NgModule({
providers: [GoogleMaps],
. . .
注意:对于网络,您必须使用 'ionic cordova run browser' 而不是 'ionic serve'