Ionic 6. Google 地图在更新到 cordova 10.0.0 后未显示
Ionic 6. Google maps not being displayed after updating to cordova 10.0.0
一旦将 cordova 更新到版本 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
package.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>
home.page.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>
home.page.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();
}
}
一旦将 cordova 更新到版本 10.0.0。我的地图视图是空白的。没有错误被抛出。我在下面分享 Ionic 信息和依赖项列表。我已经尝试创建一个新的 API ke 并将其添加到应用程序中，但没有任何效果。
Cordova 10 中的离子原生 google 映射仍然存在一个持续的问题。根据 github 问题单，问题是：
It's not related to your target Android version. It's cause by change
from 4.0.x to 4.1.x of AGP (Android Gradle Plugin) Prior to AGP 4.1.+,
assert keyword was not enforced.
Latest Cordova-Android started using AGP 4.1.+, which is causing the
AssertionError
有关 github 问题，请参阅此 link。
有一个 非官方修复程序 您可以尝试它尚未合并到 mapsplugin:master 分支。您可以阅读此 link。您可以尝试 fork 回购，但 注意 根据作者的说法，该修复程序不适用于生产用途。
Please note my fork is not intended for production usage.
That said, there shouldn't be any changes related to map markers in
the fork.
If you find the issue. Feel free to suggest a PR
一旦将 cordova 更新到版本 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
package.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>
home.page.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>
home.page.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();
}
}
一旦将 cordova 更新到版本 10.0.0。我的地图视图是空白的。没有错误被抛出。我在下面分享 Ionic 信息和依赖项列表。我已经尝试创建一个新的 API ke 并将其添加到应用程序中，但没有任何效果。
Cordova 10 中的离子原生 google 映射仍然存在一个持续的问题。根据 github 问题单，问题是：
It's not related to your target Android version. It's cause by change from 4.0.x to 4.1.x of AGP (Android Gradle Plugin) Prior to AGP 4.1.+, assert keyword was not enforced.
Latest Cordova-Android started using AGP 4.1.+, which is causing the AssertionError
有关 github 问题，请参阅此 link。
有一个 非官方修复程序 您可以尝试它尚未合并到 mapsplugin:master 分支。您可以阅读此 link。您可以尝试 fork 回购，但 注意 根据作者的说法，该修复程序不适用于生产用途。
Please note my fork is not intended for production usage.
That said, there shouldn't be any changes related to map markers in the fork.
If you find the issue. Feel free to suggest a PR