Ionic 6. 更新到 cordova 10.0.0 后 Google 地图未显示

Posted 2023-03-16

【中文标题】Ionic 6. 更新到 cordova 10.0.0 后 Google 地图未显示

【英文标题】：Ionic 6. Google maps not being displayed after updating to cordova 10.0.0

【发布时间】：2021-11-13 21:58:18

【问题描述】：

一旦将 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 并将其添加到应用程序中，但没有任何效果。

【参考方案1】：

关于 Cordova 10 中离子原生谷歌地图的问题仍然存在。根据 github 票证，问题是：

这与您的目标 Android 版本无关。是变化造成的 在 AGP 4.1.+ 之前的 AGP（Android Gradle 插件）的 4.0.x 到 4.1.x， assert 关键字未强制执行。

最新的 Cordova-Android 开始使用 AGP 4.1.+，这导致 AssertionError

有关 github 问题，请参阅此link。

有一个非官方修复您可以尝试，它尚未合并到 mapsplugin:master 分支。您可以阅读此link。您可以尝试分叉存储库，但请注意 根据作者的说法，该修复程序不适合生产使用。

请注意，我的 fork 不适用于生产用途。

也就是说，不应该有任何与地图标记相关的更改 叉子。

如果您发现问题。欢迎提出 PR 建议

【讨论】：

感谢您的快速回复。