Как правильно установить cordova-google-maps в проекте Ionic 3? - PullRequest
Новая
       15

Как правильно установить cordova-google-maps в проекте Ionic 3?

0 голосов
/ 24 апреля 2018

Я пытаюсь использовать ionic-native / google-maps и cordova-plugin-googlemaps в моем приложении Ionic 3 для Android и iOS.

  1. Сначала я получил ключи API для Android и iOS из консоли разработчика Google.
  2. Затем установил плагин cordova map и плагин ionic native google map, используя следующую команду: 
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
  1. Затем попытался собрать проект и получил ошибку ниже:

более одной библиотеки с именем пакета '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.1 с 12.0.0 . Затем снова добавил платформу для Android с самого начала после удаления папки проекта, плагинов и платформ node_modules. Но тогда я получил следующую ошибку:

Не удалось выполнить задачу ': 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 / авт / апи / зарегистрировались / внутренний / 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 на устройстве, но не открывает проект.

У меня также есть "firebase": "^ 4.13.1" и "angularfire2": "^ 5.0.0-rc.5-next" в моем package.json .

Может кто-нибудь указать мне, какие шаги я должен предпринять для работы с Google Maps в моем проекте?

1 Ответ

0 голосов
/ 24 апреля 2018

P.S. Этот пример без использования плагинов.

Включите API Карт Google в файл src / index.html (над файлом cordova.js): 

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

Затем вы можете использовать это в HTML file 

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

И это в контроллере , например 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%;
      }

    }
...