无法读取空Ionic 3的属性“ offsetHeight”

时间:2019-02-22 15:09:10

标签: angular google-maps ionic-framework

当我尝试在我的离子应用程序中加载本地Google地图时,出现下一个错误。

ERROR TypeError: Cannot read property 'offsetHeight' of undefined
at index.js:1024
at t.invokeTask (polyfills.js:3)
at Object.onInvokeTask (core.js:17280)
at t.invokeTask (polyfills.js:3)
at r.runTask (polyfills.js:3)
at e.invokeTask (polyfills.js:3)
at i.isUsingGlobalCallback.invoke (polyfills.js:3)
at n (polyfills.js:3)

我的Google Maps版本是v5.0.0.beta22

这是我在file.ts中的代码:

import {
 GoogleMaps,
 GoogleMap,
} from '@ionic-native/google-maps';



@IonicPage()
   @Component({
    selector: 'page-event-details',
    templateUrl: 'event-details.html',
   })

export class EventDetailsPage{
  map: GoogleMap

  async ngAfterViewInit() {
    await this.loadMap();
  }

  loadMap() {
    this.map = GoogleMaps.create('map_canvas');
  }
}

我尝试将ngOnInit与ngAfterViewInit一起使用,并且在没有asinc的情况下进行异步处理,我不知道该怎么办,请帮助我解决此问题。 我在app.module.ts中导入file.module.ts,执行脚本:ionic cordova运行浏览器,并且错误是相同的。

下一个是我的html代码:

<ion-content>
<div id="map_canvas"></div>
</ion-content>

我尝试将高度设置为100%(150像素到500像素),并放置透明背景,一切。

我的电子邮件:juanma97@outlook.com 如果您愿意,我可以做Skype,对我来说非常重要。 谢谢!

我的package.json

    {
  "name": "App_events",
  "version": "0.0.1",
  "author": "Ionic Framework",
  "homepage": "http://ionicframework.com/",
  "private": true,
  "scripts": {
    "start": "ionic-app-scripts serve",
    "clean": "ionic-app-scripts clean",
    "build": "ionic-app-scripts build",
    "lint": "ionic-app-scripts lint"
  },
  "dependencies": {
    "@angular/animations": "7.2.6",
    "@angular/common": "7.2.6",
    "@angular/compiler": "7.2.6",
    "@angular/compiler-cli": "7.2.6",
    "@angular/core": "7.2.6",
    "@angular/forms": "7.2.6",
    "@angular/http": "7.2.6",
    "@angular/platform-browser": "7.2.6",
    "@angular/platform-browser-dynamic": "7.2.6",
    "@ionic-native/core": "^5.2.0",
    "@ionic-native/geolocation": "5.2.0",
    "@ionic-native/google-maps": "v5.0.0-beta.21",
    "@ionic-native/native-geocoder": "5.2.0",
    "@ionic-native/splash-screen": "5.2.0",
    "@ionic-native/status-bar": "5.2.0",
    "@ionic/pro": "^2.0.4",
    "@ionic/storage": "2.2.0",
    "angularfire2": "^5.1.1",
    "cordova-plugin-googlemaps": "2.5.1",
    "cordova-plugin-ionic": "^5.3.0",
    "cordova-plugin-nativegeocoder": "3.1.3",
    "firebase": "^5.8.2",
    "ionic-angular": "3.9.3",
    "ionicons": "4.5.5",
    "promise-polyfill": "^8.1.0",
    "rxjs": "^6.4.0",
    "rxjs-compat": "^6.4.0",
    "sw-toolbox": "3.6.0",
    "zone.js": "0.8.29"
  },
  "devDependencies": {
    "@ionic/app-scripts": "^3.2.2",
    "typescript": "3.3.3"
  },
  "description": "An Ionic project",
  "cordova": {
    "plugins": {
      "cordova-plugin-geolocation": {},
      "cordova-plugin-nativegeocoder": {},
      "cordova-plugin-googlemaps": {
        "API_KEY_FOR_ANDROID": "AIzaSyBvrvKuOFHsMizEd9SYBBjllqWyfWlByLA",
        "API_KEY_FOR_IOS": "AIzaSyBvrvKuOFHsMizEd9SYBBjllqWyfWlByLA"
      }
    }
  }
}

0 个答案:

没有答案