angular - Ionic 6. 更新到 cordova 10.0.0 后 Google 地图未显示
问题描述
一旦将科尔多瓦更新到 10.0.0 版。我的地图视图只是空白。没有错误被抛出。我在下面分享 Ionic 信息和依赖项列表。我尝试创建一个新的 API ke 并将其添加到应用程序中,但没有任何效果。
信息:
Ionic:
Ionic CLI : 6.16.3 (/home/abhishyam/.nvm/versions/node/v12.19.0/lib/node_modules/@ionic/cli)
Ionic Framework : @ionic/angular 5.8.0
@angular-devkit/build-angular : 12.1.4
@angular-devkit/schematics : 12.1.4
@angular/cli : 12.1.4
@ionic/angular-toolkit : 4.0.0
Cordova:
Cordova CLI : 10.0.0
Cordova Platforms : android 10.0.0
Cordova Plugins : cordova-plugin-ionic-keyboard 2.2.0, cordova-plugin-ionic-webview 4.2.1, (and 5 other plugins)
Utility:
cordova-res (update available: 0.15.3) : 0.15.2
native-run (update available: 1.4.1) : 1.2.2
System:
Android SDK Tools : 26.1.1 (/home/abhishyam/android-sdk)
NodeJS : v12.19.0 (/home/abhishyam/.nvm/versions/node/v12.19.0/bin/node)
npm : 6.14.9
OS : Linux 5.4
包.json
{
"name": "nearby-restaurants",
"version": "0.0.1",
"author": "Ionic Framework",
"homepage": "https://ionicframework.com/",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
},
"private": true,
"dependencies": {
"@angular/common": "~12.1.1",
"@angular/core": "~12.1.1",
"@angular/forms": "~12.1.1",
"@angular/platform-browser": "~12.1.1",
"@angular/platform-browser-dynamic": "~12.1.1",
"@angular/router": "~12.1.1",
"@ionic-native/core": "^5.36.0",
"@ionic-native/geolocation": "^5.36.0",
"@ionic-native/google-maps": "^5.5.0",
"@ionic/angular": "^5.5.2",
"rxjs": "~6.6.0",
"tslib": "^2.2.0",
"zone.js": "~0.11.4"
},
"devDependencies": {
"@angular-devkit/build-angular": "~12.1.1",
"@angular-eslint/builder": "~12.0.0",
"@angular-eslint/eslint-plugin": "~12.0.0",
"@angular-eslint/eslint-plugin-template": "~12.0.0",
"@angular-eslint/template-parser": "~12.0.0",
"@angular/cli": "~12.1.1",
"@angular/compiler": "~12.1.1",
"@angular/compiler-cli": "~12.1.1",
"@angular/language-service": "~12.0.1",
"@ionic/angular-toolkit": "^4.0.0",
"@types/jasmine": "~3.6.0",
"@types/jasminewd2": "~2.0.3",
"@types/node": "^12.11.1",
"@typescript-eslint/eslint-plugin": "4.16.1",
"@typescript-eslint/parser": "4.16.1",
"cordova-android": "^10.0.0",
"cordova-plugin-androidx-adapter": "^1.1.3",
"cordova-plugin-device": "2.0.2",
"cordova-plugin-googlemaps": "^2.7.1",
"cordova-plugin-ionic-keyboard": "^2.0.5",
"cordova-plugin-ionic-webview": "^4.0.0",
"cordova-plugin-splashscreen": "5.0.2",
"cordova-plugin-statusbar": "2.4.2",
"eslint": "^7.6.0",
"eslint-plugin-import": "2.22.1",
"eslint-plugin-jsdoc": "30.7.6",
"eslint-plugin-prefer-arrow": "1.2.2",
"jasmine-core": "~3.8.0",
"jasmine-spec-reporter": "~5.0.0",
"karma": "~6.3.2",
"karma-chrome-launcher": "~3.1.0",
"karma-coverage": "~2.0.3",
"karma-coverage-istanbul-reporter": "~3.0.2",
"karma-jasmine": "~4.0.0",
"karma-jasmine-html-reporter": "^1.5.0",
"protractor": "~7.0.0",
"ts-node": "~8.3.0",
"typescript": "~4.2.4"
},
"description": "An Ionic project",
"cordova": {
"plugins": {
"cordova-plugin-statusbar": {},
"cordova-plugin-device": {},
"cordova-plugin-splashscreen": {},
"cordova-plugin-ionic-webview": {
"ANDROID_SUPPORT_ANNOTATIONS_VERSION": "27.+"
},
"cordova-plugin-ionic-keyboard": {},
"cordova-plugin-androidx-adapter": {},
"cordova-plugin-googlemaps": {
"API_KEY_FOR_ANDROID": "AIzaSyAmF3zBxA2VqPJzgMNhYt5HKvy2BKw1f1U",
"API_KEY_FOR_IOS": "AIzaSyAmF3zBxA2VqPJzgMNhYt5HKvy2BKw1f1U"
}
},
"platforms": [
"android"
]
}
}
src/index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Ionic App</title>
<base href="/" />
<meta name="color-scheme" content="light dark" />
<meta name="viewport" content="viewport-fit=cover, width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<meta name="format-detection" content="telephone=no" />
<meta name="msapplication-tap-highlight" content="no" />
<link rel="icon" type="image/png" href="assets/icon/favicon.png" />
<!-- add to homescreen for ios -->
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
</head>
<body>
<app-root></app-root>
</body>
<script async
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAmF3zBxA2VqPJzgMNhYt5HKvy2BKw1f1U">
</script>
</html>
主页.html
<ion-header [translucent]="true">
<ion-toolbar>
<ion-title>
Blank
</ion-title>
</ion-toolbar>
</ion-header>
<ion-content padding>
<div id="map_canvas"></div>
</ion-content>
主页.ts
import { Component, OnInit } from '@angular/core';
import { ToastController, Platform } from '@ionic/angular';
import {
GoogleMaps,
GoogleMap,
GoogleMapsEvent,
Marker,
GoogleMapsAnimation,
MyLocation,
} from '@ionic-native/google-maps';
@Component({
selector: 'app-home',
templateUrl: 'home.page.html',
styleUrls: ['home.page.scss'],
})
export class HomePage implements OnInit {
map: GoogleMap;
address: string;
constructor(public toastCtrl: ToastController, private platform: Platform) {}
async ngOnInit() {
// Since ngOnInit() is executed before `deviceready` event,
// you have to wait the event.
await this.platform.ready();
this.loadMap();
}
loadMap() {
this.map = GoogleMaps.create('map_canvas', {
camera: {
target: {
lat: 43.0741704,
lng: -89.3809802
},
zoom: 18,
tilt: 30
}
});
// this.goToMyLocation();
}
goToMyLocation() {
this.map.clear();
// Get the location of you
this.map
.getMyLocation()
.then((location: MyLocation) => {
console.log(JSON.stringify(location, null, 2));
// Move the map camera to the location with animation
this.map.animateCamera({
target: location.latLng,
zoom: 17,
duration: 5000,
});
//add a marker
let marker: Marker = this.map.addMarkerSync({
title: '@ionic-native/google-maps plugin!',
snippet: 'This plugin is awesome!',
position: location.latLng,
animation: GoogleMapsAnimation.BOUNCE,
});
//show the infoWindow
marker.showInfoWindow();
//If clicked it, display the alert
marker.on(GoogleMapsEvent.MARKER_CLICK).subscribe(() => {
this.showToast('clicked!');
});
this.map.on(GoogleMapsEvent.MAP_READY).subscribe((data) => {
console.log('Click MAP', data);
});
})
.catch((err) => {
//this.loading.dismiss();
this.showToast(err.error_message);
});
}
async showToast(message: string) {
let toast = await this.toastCtrl.create({
message: message,
duration: 2000,
position: 'middle',
});
toast.present();
}
}
一旦将科尔多瓦更新到 10.0.0 版。我的地图视图只是空白。没有错误被抛出。我在下面分享 Ionic 信息和依赖项列表。我尝试创建一个新的 API ke 并将其添加到应用程序中,但没有任何效果。
解决方案
关于 Cordova 10 中离子原生谷歌地图的问题仍然存在。根据 github 票证,问题是:
它与您的目标 Android 版本无关。这是由于 AGP(Android Gradle 插件)从 4.0.x 更改为 4.1.x 造成的。在 AGP 4.1.+ 之前, 未强制执行assert关键字。
最新的 Cordova-Android 开始使用 AGP 4.1.+,这导致 AssertionError
有关 github 问题,请参阅此链接。
您可以尝试一个非官方的修复程序,该修复程序尚未合并到 mapsplugin:master 分支。您可以从此链接阅读。您可以尝试分叉存储库,但请注意 ,该修复程序不适用于作者所说的生产用途。
请注意,我的 fork 不适用于生产用途。
也就是说,叉子中的地图标记不应该有任何变化。
如果你发现问题。随意提出 PR
推荐阅读
- laravel - 如何使“Laravel 本地化到 Vue/JSON”工作
- linux - Dockerfile:QIODevice::seek:无法在顺序设备上调用 seek
- mysql - 在Mysql中联合三个表
- mysql - 如何修复 node.js 代码以检查登录
- python - Django 向导表单中的条件表单字段
- c++ - 在方法中引用我正在阅读的流
- optimization - 如何以最优方式移动大型阵列 n 发生次数
- c# - 在具有多个条件的 linq 中获取匹配的属性名称
- typescript - 每分钟将字段值增加 1
- spring-boot - 面临问题在 Spring Boot 中配置 Spring Batch Admin-无法解析名称“集成:smartLifeCycleAttributeGroup”