ios - 如何使用 Ionic 4 在 IOS 上修复 "cordova-plugin-googlemaps is not installed or ready yet"

标签 ios google-maps ionic-framework

我使用 GoogleMaps 在 Ionic 4 上开发了一个应用程序。我首先在Android上开发,然后当我想将我的项目导出到IOS时出现问题。

我想指出的是,我在 Android 上使用了cordova-plugin-googlemaps“multiple_maps”版本,如果没有它,我无法让 map 在Android 上运行。

我为我的项目安装了依赖项:

  • Cordova 准备ios
  • npm install @ionic-native/core@beta
  • npm install @ionic-native/google-maps@beta
  • ionic cordova插件添加cordova-plugin-googlemaps --variable API_KEY_FOR_ANDROID="my android key"--variable API_KEY_FOR_IOS="my IOS key"

  • 但是使用最后一个命令,问题出现了。我可以在控制台中看到 android 和浏览器安装良好,ios 也感谢“pod”。
    所以我试图在 Xcode 上构建:我有错误,找不到文件“GoogleMaps/GoogleMaps.h”。

    我找到的解决方案是打开Podfile文件,将GoogleMaps的版本默认从“2.7.0”更改为“3.1.0”版本。所以我删除了 Podfile.lock 文件和 Pods 文件夹,然后我重新启动了 pod 安装。

    不幸的是,我仍然有错误“未找到 GoogleMaps/GoogleMaps.h。”,但我设法(不幸的是我不再知道如何)删除此错误并启动此应用程序。

    而不是 map ,我有错误“[GoogleMaps]cordova-plugin-googlemaps 尚未安装或准备就绪。” .我很确定它背后的代码没问题,因为它在 Android 上没有任何问题。

    这是我的不同信息:

    操作系统:Mojave 10.14.5(最新版本)
    XCode:10.2(最新版本)
    Cordova :8.1.2
    Cordova -ios:5.0.1
    ionic :5.0.1

    我的cordova插件列表:
    cordova-clipboard 1.2.1 "Clipboard" cordova-plugin-camera 4.0.3 "Camera" cordova-plugin-device 2.0.2 "Device" cordova-plugin-file 6.0.1 "File" cordova-plugin-file-transfer 1.7.1 "File Transfer" cordova-plugin-filepath 1.5.1 "cordova-plugin-filepath" cordova-plugin-geolocation 4.0.1 "Geolocation" cordova-plugin-googlemaps 2.6.2 "cordova-plugin-googlemaps" cordova-plugin-ionic-keyboard 2.1.3 "cordova-plugin-ionic-keyboard" cordova-plugin-ionic-webview 3.1.2 "cordova-plugin-ionic-webview" cordova-plugin-mauron85-background-geolocation 3.0.3 "CDVBackgroundGeolocation" cordova-plugin-network-information 2.0.1 "Network Information" cordova-plugin-splashscreen 5.0.2 "Splashscreen" cordova-plugin-statusbar 2.4.2 "StatusBar" cordova-plugin-whitelist 1.3.3 "Whitelist" info.protonet.imageresizer 0.1.1 "Image Resizer"
    我的 package.json
    "dependencies": {
        "@angular/common": "^7.2.13",
        "@angular/core": "^7.2.13",
        "@angular/forms": "^7.2.13",
        "@angular/http": "^7.2.13",
        "@angular/platform-browser": "^7.2.13",
        "@angular/platform-browser-dynamic": "^7.2.13",
        "@angular/router": "^7.2.13",
        "@ionic-native/splash-screen": "^5.4.0",
        "@ionic-native/status-bar": "^5.4.0",
        "@ionic/angular": "^4.3.0",
        "@mauron85/cordova-plugin-background-geolocation": "3.0.3",
        "cordova-android": "8.0.0",
        "cordova-browser": "6.0.0",
        "cordova-clipboard": "1.2.1",
        "cordova-ios": "4.5.5",
        "cordova-plugin-camera": "4.0.3",
        "cordova-plugin-device": "2.0.2",
        "cordova-plugin-file": "6.0.1",
        "cordova-plugin-file-transfer": "1.7.1",
        "cordova-plugin-filepath": "1.5.1",
        "cordova-plugin-geolocation": "4.0.1",
        "cordova-plugin-googlemaps": "git+https://github.com/mapsplugin/cordova-plugin-googlemaps.git#multiple_maps",
        "cordova-plugin-ionic-keyboard": "^2.0.5",
        "cordova-plugin-ionic-webview": "^3.0.0",
        "cordova-plugin-mauron85-background-geolocation": "^3.0.1",
        "cordova-plugin-network-information": "2.0.1",
        "cordova-plugin-splashscreen": "5.0.2",
        "cordova-plugin-statusbar": "2.4.2",
        "cordova-plugin-whitelist": "1.3.3",
        "cordova-windows": "4.4.2",
        "core-js": "^2.5.4",
        "info.protonet.imageresizer": "0.1.1",
        "ionic-plugin-keyboard": "2.2.1",
        "zone.js": "~0.8.29"
    },
    "devDependencies": {
        "@angular-devkit/architect": "~0.12.3",
        "@angular-devkit/build-angular": "^0.13.8",
        "@angular-devkit/core": "~7.2.3",
        "@angular-devkit/schematics": "~7.2.3",
        "@angular/cli": "^7.3.8",
        "@angular/compiler": "^7.2.13",
        "@angular/compiler-cli": "^7.2.13",
        "@angular/language-service": "^7.2.13",
        "@fortawesome/angular-fontawesome": "^0.3.0",
        "@fortawesome/fontawesome-free": "^5.8.1",
        "@fortawesome/fontawesome-svg-core": "^1.2.17",
        "@fortawesome/free-brands-svg-icons": "^5.8.1",
        "@fortawesome/free-regular-svg-icons": "^5.8.1",
        "@fortawesome/free-solid-svg-icons": "^5.8.1",
        "@ionic-native/background-geolocation": "^5.4.0",
        "@ionic-native/camera": "^5.5.1",
        "@ionic-native/clipboard": "^5.4.0",
        "@ionic-native/core": "^5.0.0",
        "@ionic-native/file": "^5.5.1",
        "@ionic-native/file-path": "^5.5.1",
        "@ionic-native/geolocation": "^5.4.0",
        "@ionic-native/google-maps": "^5.0.0-beta.27",
        "@ionic-native/image-resizer": "^5.5.1",
        "@ionic-native/keyboard": "^5.4.0",
        "@ionic-native/network": "^5.6.0",
        "@ionic-native/transfer": "^3.14.0",
        "@ionic/angular-toolkit": "~1.4.0",
        "@ionic/app-scripts": "^3.2.3",
        "@ngx-translate/core": "^11.0.1",
        "@ngx-translate/http-loader": "^4.0.0",
        "@types/jasmine": "~2.8.8",
        "@types/jasminewd2": "~2.0.3",
        "@types/node": "~10.14.2",
        "codelyzer": "~4.5.0",
        "cordova": "^8.1.2",
        "ionic4-rating": "^1.0.9",
        "jasmine-core": "~2.99.1",
        "jasmine-spec-reporter": "~4.2.1",
        "karma": "~3.1.4",
        "karma-chrome-launcher": "~2.2.0",
        "karma-coverage-istanbul-reporter": "~2.0.1",
        "karma-jasmine": "~1.1.2",
        "karma-jasmine-html-reporter": "^0.2.2",
        "node-sass": "^4.12.0",
        "protractor": "~5.4.0",
        "rxjs": "^6.5.2",
        "rxjs-compat": "^6.4.0",
        "ts-node": "~8.0.0",
        "tslint": "~5.12.0",
        "typescript": "~3.1.6"
    },
    "description": "Test",
    "cordova": {
        "platforms": [
            "windows",
            "browser"
        ],
        "plugins": {
            "cordova-plugin-geolocation": {
                "GEOLOCATION_USAGE_DESCRIPTION": ""
            },
            "cordova-plugin-whitelist": {},
            "cordova-plugin-statusbar": {},
            "cordova-plugin-device": {},
            "cordova-plugin-splashscreen": {},
            "cordova-plugin-ionic-webview": {
                "ANDROID_SUPPORT_ANNOTATIONS_VERSION": "27.+"
            },
            "cordova-plugin-ionic-keyboard": {},
            "cordova-clipboard": {},
            "cordova-plugin-mauron85-background-geolocation": {
                "GOOGLE_PLAY_SERVICES_VERSION": "11+",
                "ANDROID_SUPPORT_LIBRARY_VERSION": "26+",
                "ICON": "@mipmap/icon",
                "SMALL_ICON": "@mipmap/icon",
                "ACCOUNT_NAME": "@string/app_name",
                "ACCOUNT_LABEL": "@string/app_name",
                "ACCOUNT_TYPE": "$PACKAGE_NAME.account",
                "CONTENT_AUTHORITY": "$PACKAGE_NAME"
            },
            "cordova-plugin-camera": {},
            "cordova-plugin-file": {},
            "cordova-plugin-file-transfer": {},
            "cordova-plugin-filepath": {},
            "info.protonet.imageresizer": {},
            "cordova-plugin-network-information": {},
            "cordova-plugin-googlemaps": {
                "API_KEY_FOR_ANDROID": "My_Key",
                "API_KEY_FOR_IOS": "My_Key",
                "LOCATION_WHEN_IN_USE_DESCRIPTION": "This app wants to get your location while this app runs only.",
                "LOCATION_ALWAYS_USAGE_DESCRIPTION": "This app wants to get your location always, even this app runs in background."
            }
        }
    }
    

    我会很感激给出的每一条线索,我真的很迷茫。谢谢您的帮助!如果有什么不清楚的,请问我会尽量解释得更好。

    编辑:我创建了一个最小的项目来重现问题 https://github.com/NuritArmelle/Bug-googlemaps-not-installed

    以下是我为重现(在 Mac 上)所做的步骤:
    npm install
    npm rebuild node-sass --unsafe-perm
    ionic cordova platform add ios
    ionic cordova prepare ios
    npm install @ionic-native/core@beta
    npm install @ionic-native/google-maps@beta
    ionic cordova plugin add cordova-plugin-googlemaps#multiple_maps --variable API_KEY_FOR_ANDROID="my android key" --variable API_KEY_FOR_IOS="my IOS key"
    

    此时,当我尝试构建时,它已经给了我错误“未找到 GoogleMaps/GoogleMaps.h”。 (这次我在 xcworkspace 上)。

    然后我在平台/ios 中创建了我的 Podfile(这是它的内容):
    DO NOT MODIFY -- auto-generated by Apache Cordova
    platform :ios, '8.0'
    target 'Bug-Googlemaps-not-installed' do
        project 'Bug-Googlemaps-not-installed.xcodeproj'
        pod 'GoogleMaps', '~> 2.7.0'
    end
    

    最后,我做了一个“pod install”。还是同样的问题,无法建立“GoogleMaps.h”的原因。

    最佳答案

    我以这种方式解决,按照我所做的更改:

  • 删除这些文件夹:platforms、node_modules、plugins、www e package-lock.json。
  • 卸载cordova:sudo npm uninstall -g cordova
  • 安装cordova:sudo npm install -g cordova
  • 从谷歌地图安装 SDK:ionic cordova plugin add https://github.com/mapsplugin/cordova-plugin-googlemaps-sdk.git
  • 安装插件谷歌地图:ionic cordova plugin add cordova-plugin-googlemaps --variable API_KEY_FOR_IOS="your_api_key"
  • ionic cordova platform add ios.
  • ionic cordova prepare ios.
  • ionic cordova debug ios.
  • open xcode.
  • 关于ios - 如何使用 Ionic 4 在 IOS 上修复 "cordova-plugin-googlemaps is not installed or ready yet",我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56479314/

    相关文章:

    ios - 使用 alamofire 的多部分/表单数据

    javascript - 使用 Google Autocomplete API 根据位置名称获取经纬度

    javascript - AngularJS 指令双向绑定(bind)在 Ionic 中不起作用

    ios - 无法使用iOS Swift在Google map 上加载自定义图 block

    ios - 小数如何四舍五入 2

    ios - 何时在 iOS 7 中使用 AutoLayout 更新约束

    android - 谷歌地图 - 底部有标记的相机位置

    android - 如何在多段线路径上为 google map v2 标记设置动画?

    ionic-framework - 弹出窗口和模态关闭后,Ionic 应用程序卡住或停止工作

    android - Ionic - 如何更改 Android StatusBarColor?