当我尝试在我的离子应用程序中加载本地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"
}
}
}
}