如何在 Ionic 3 项目中正确安装 cordova-google-maps？答案

【问题标题】：How to install cordova-google-maps properly in an Ionic 3 project?如何在 Ionic 3 项目中正确安装 cordova-google-maps？
【发布时间】：2018-10-04 15:44:26
【问题描述】：

我正在尝试在我的 Ionic 3 应用程序中使用 ionic-native/google-maps 和 cordova-plugin-googlemaps，同时适用于 Android 和 iOS。

起初，我从 google 开发者控制台获得了 android 和 iOS 的 api 密钥。
然后使用以下命令安装cordova地图插件和离子原生谷歌地图插件：

ionic cordova plugin add cordova-plugin-googlemaps --variable API_KEY_FOR_ANDROID="..." --variable API_KEY_FOR_IOS="..."
npm install @ionic-native/core @ionic-native/google-maps

然后，尝试构建项目并得到以下错误：

多个库的包名称为“com.google.android.gms.license”

而且，当时我在 config.xml 中有这些配置：

<plugin name="cordova-plugin-googlemaps" spec="^2.2.9">
        <variable name="API_KEY_FOR_ANDROID" value="*******" />
        <variable name="API_KEY_FOR_IOS" value="*******" />
        <variable name="PLAY_SERVICES_VERSION" value="12.0.0" />
        <variable name="ANDROID_SUPPORT_V4_VERSION" value="24.1.0" />
    </plugin>

我搜索了一下，发现是这个 PLAY_SERVICES_VERSION 导致了问题。所以，我把它从 12.0.0 改为 12.0.1。然后在从项目中删除node_modules、plugins和platforms文件夹后，再次从头开始添加android平台。但是，然后我收到以下错误：

任务“:transformClassesWithDexForDebug”执行失败。 com.android.build.api.transform.TransformException: com.android.ide.common.process.ProcessException: java.util.concurrent.ExecutionException: com.android.dex.DexException: 多个dex文件定义Lcom/google/android/ gms/auth/api/signin/internal/zzo;

现在，在我的 config.xml 中，我有

<plugin name="cordova-plugin-googlemaps" spec="^2.2.9">
    <variable name="API_KEY_FOR_ANDROID" value="*******" />
    <variable name="API_KEY_FOR_IOS" value="*******" />
    <variable name="PLAY_SERVICES_VERSION" value="12.0.1" />
    <variable name="ANDROID_SUPPORT_V4_VERSION" value="24.1.0" />
</plugin>

所以，我再次将 PLAY_SERVICES_VERSION 从 12.0.1 更改为 11.6.0。现在，我可以毫无错误地构建项目，但问题是当我运行项目时，它正在设备中安装 apk 但它没有打开项目。

我的 package.json 中还有 "firebase": "^4.13.1" 和 "angularfire2": "^5.0.0-rc.5-next"。

谁能指出我应该采取哪些步骤在我的项目中使用谷歌地图？

【问题讨论】：

标签： google-maps ionic-framework ionic3

【解决方案1】：

附注这个例子没有使用插件。

在您的 src/index.html 文件（cordova.js 文件上方）中包含 Google Maps API：

<script src="http://maps.google.com/maps/api/js?key=YOUR_API_KEY_HERE"></script>
<script src="cordova.js"></script>

然后你可以在 HTML 文件中使用它

<ion-content>
  <div #map id="map"></div> 
</ion-content>

这在 controller 中，例如 home.ts

import { Component, ViewChild, ElementRef } from '@angular/core';
import { NavController } from 'ionic-angular';

declare var google;

@Component({
  selector: 'home-page',
  templateUrl: 'home.html'
})
export class HomePage {

  @ViewChild('map') mapElement: ElementRef;
  map: any;

  constructor(public _navCtrl: NavController) {

  }

  ionViewDidLoad(){
    this.loadMap();
  }

  loadMap(){

    let latLng = new google.maps.LatLng(45.815011, 15.981919);

    let mapOptions = {
      center: latLng,
      zoom: 15,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    }

    this.map = new google.maps.Map(this.mapElement.nativeElement, mapOptions);

  }
}

然后你可以用 CSS

自定义地图

 home-page {

      .scroll {
        height: 100%
      }

      #map {
        width: 100%;
        height: 100%;
      }

    }

【讨论】：