ionic 4 Google-maps 5 beta"TypeError:无法读取null的属性'BaseClass'" [英] ionic 4 google-maps 5 beta "TypeError: Cannot read property 'BaseClass' of null"

问题描述

我正尝试使用ionic 4 google-maps@5.0.0-beta.20

im trying to use ionic 4 google-maps@5.0.0-beta.20

我正在遵循以下幻灯片: https://docs. google.com/presentation/d/1zlkmoSY4AzDJc_P4IqWLnzct41IqHyzGkLeyhlAxMDE/edit#slide=id.g282d0a7bfd_0_140

i am following these slides: https://docs.google.com/presentation/d/1zlkmoSY4AzDJc_P4IqWLnzct41IqHyzGkLeyhlAxMDE/edit#slide=id.g282d0a7bfd_0_140

我收到此错误:"TypeError:无法读取null的属性'BaseClass'"

I get this error: "TypeError: Cannot read property 'BaseClass' of null"

newlocation.page.html:

newlocation.page.html:

<ion-content>
  <h3>Ionic GoogleMaps Starter</h3>
  <div id="map_canvas">

  </div>
</ion-content>

newlocation.page.scss:

newlocation.page.scss:

map_canvas {
  height: 90%;
}

newlocation.page.ts:

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:

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.+"
      }

推荐答案

我可以正常使用

我只删除了"ion-content"，而未设置"div id ="map_canvas"'

I only deleted 'ion-content' and let 'div id="map_canvas"' alone

我的信息:

package.json:

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:

newlocation.page.html:

<div id="map_canvas"></div>

newlocation.page.scss:

newlocation.page.scss:

map_canvas {
  height: 90%;
}

newlocation.page.ts:

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

newlocation.module.ts

import { GoogleMaps } from '@ionic-native/google-maps/ngx';
. . .
   @NgModule({
      providers: [GoogleMaps],
. . .

注意:对于网络，您必须使用离子Cordova运行浏览器"而不是离子服务"

Note: for web you have to use 'ionic cordova run browser' not 'ionic serve'

这篇关于ionic 4 Google-maps 5 beta"TypeError:无法读取null的属性'BaseClass'"的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！