Ionic6.更新到cordova10.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框架: @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
   可多瓦平臺 : android 10.0.0
   Cordova插件 : cordova-plugin-ionic-keyboard 2.2.0, cordova-plugin-ionic-webview 4.2.1, (和其他5個插件)

實用程式。

   cordova-res (update available: 0.15.3) : 0.15.2
   native-run (可更新：1.4.1) : 1.2.2

系統。

   Android SDK工具：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
   作業系統 : Linux 5.4

package.json

{
  "name": "neighly-restaurants",
  "版本": "0.0.1",
  "作者": "Ionic Framework",
  "主頁": "https://ionicframework.com/",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "私有": true,
  "依賴性"。{
    "@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",
    "typecript": "~4.2.4"
  },
  "描述": "一個Ionic專案"。
  "cordova": {
    "插件"。{
      "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"
      }
    },
    "平臺": [
      "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="格式檢測" content="電話=no" />
  <meta name="msapplication-tap-highlight" content="no" />

  <link rel="icon" type="image/png" href="assets/icon/favicon.png" />

  <!--為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>
<腳本 async
    src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAmF3zBxA2VqPJzgMNhYt5HKvy2BKw1f1U">
</script>
</html>

home.page.html

<ion-header [translucent]="true" >
  <ion-toolbar>
    <ion-title>
      空白
    </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content padding>
    <div id="map_canvas"></div>
</ion-content>

home.page.ts

從'@angular/core'匯入 { Component, OnInit }。
從'@ionic/angular'匯入 { ToastController, Platform }。
輸入 {
  GoogleMaps,
  谷歌地圖。
  GoogleMapsEvent。
  標記。
  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;
  地址：字串。
  建構式(public toastCtrl: ToastController, private platform: Platform) {}

  async ngOnInit() {
    // 由于ngOnInit()是在`deviceready`事件之前執行的。
    // 你必須等待該事件。
    await this.platform.ready();
    this.loadMap()。
  }

  loadMap() {
    this.map = GoogleMaps.create('map_canvas', {
      相機。{
        目標: {
          lat: 43.0741704,
          lng: -89.3809802
        },
        zoom: 18,
        傾斜度: 30
      }
    });
    // this.goToMyLocation();
  }

  goToMyLocation() {
    this.map.clear();

    // 獲取你的位置
    this.map
      .getMyLocation()
      .then((location: MyLocation) => {
        console.log(JSON.stringify(location, null, 2))。

        //用影片將地圖攝像機移到該地點
        this.map.animateCamera({
          target: location.latLng,
          zoom: 17,
          持續時間。5000,
        });

        //添加一個標記
        讓Marker: Marker = this.map.addMarkerSync({
          title: '@ionic-native/google-maps plugin!' 。
          片段。'這個插件真棒！'。
          position: location.latLng,
          影片。GoogleMapsAnimation.BOUNCE。
        });

        //顯示資訊視窗
        marker.showInfoWindow()。

        //如果點擊了它，顯示警報
        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: 訊息。
      持續時間：2000。
      position: 'middle',
    });
    toast.present()。
  }
}

只要更新cordova到10.0.0版本。我的地圖視圖只是空白。沒有錯誤被拋出。我在下面分享了Ionic的資訊和依賴性串列。我已經嘗試創建一個新的API ke并將其添加到應用程式中，但沒有任何效果。

uj5u.com熱心網友回復：

在Cordova 10中，關于ionic原生谷歌地圖的問題仍然存在。根據github的票據，該問題是：

這與你的目標Android版本無關。它是由以下變化引起的從 4.0.x 到 4.1.x 的 AGP（Android Gradle 插件）造成的。 assert關鍵字沒有被強制執行。
最新的Cordova-Android開始使用AGP 4.1. ，這就導致了 AssertionError

請參考此鏈接，了解 github 問題。

有一個非官方修復，您可以嘗試一下，它尚未被合并到mapsplugin:master分支。您可以從這個鏈接閱讀。你可以嘗試分叉這個 repo，但是注意 按照作者的說法，這個修復并不打算用于生產用途。

請注意我的fork并不打算用于生產。
這就是說，在fork中不應該有任何與地圖示記有關的變化。

盡管如此，在叉子中不應該有任何與地圖示記相關的變化。
如果你發現這個問題。請隨意建議一個PR

轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/328629.html
標籤：

上一篇：在Python中檢查哪個鍵在其字典中擁有最多的字母
下一篇：在C 中使用OpenCV時，"未定義的參考"和包括未找到的內容