У меня появляется следующая ошибка, когда я пытаюсь загрузить нативные карты Google в мое приложение ionic.
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, я не знаю, что делать дальше, пожалуйста, помогите мне решить эту проблему.Я импортирую в file.module.ts в app.module.ts, я выполняю скрипт: браузер ionic cordova запускается, и ошибка та же.
Мой HTML-код следующий:
<ion-content>
<div id="map_canvas"></div>
</ion-content>
Я пытался установить высоту до 100% при 150-500 пикселей, установить прозрачный фон, все.
Мой электронный адрес: juanma97@outlook.com Я могу использовать Skype, если вы предпочитаете, это очень важномне.Спасибо!
Мой пакет.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"
}
}
}
}