Как использовать нативные карты Google с приложением ionic4? - PullRequest
Новая
       22

Как использовать нативные карты Google с приложением ionic4?

0 голосов
/ 23 апреля 2019

Я использую родной плагин Google Maps версии 5.5.0 с приложением ionic4. К сожалению, не добился успеха. Я вижу только белый / прозрачный экран вместо карты. Я перепробовал все решения, связанные с переполнением стека, но безуспешно Пожалуйста, помогите мне разобраться в этом вопросе. Я застрял в этом с последних семи дней.

мой код home.html 

<ion-content>
  <div id="map_canvas" style="width: 100%; height: 80%;">
    <ion-button ion-button (click)="onButtonClick()">Demo</ion-button>
  </div>
</ion-content>

мой .ts файл 

    import {
  GoogleMaps,
  GoogleMap,
  GoogleMapsEvent,
  Marker,
  GoogleMapsAnimation,
  MyLocation,
  LatLng
} from '@ionic-native/google-maps/ngx';
ngOnInit() {
    this.platform.ready();
    this.loadMap();
  }

  loadMap() {
    this.map = GoogleMaps.create('map_canvas');
    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);
      });
  }

мой пакет.json 

{
  "name": "aetabs",
  "version": "1.0.0",
  "author": "adaept",
  "homepage": "https://aetabs.adaept.com/",
  "scripts": {
    "ng": "ng",
    "start": "ionic serve",
    "build": "ionic build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/common": "7.2.2",
    "@angular/core": "7.2.2",
    "@angular/forms": "7.2.2",
    "@angular/http": "7.2.2",
    "@angular/platform-browser": "7.2.2",
    "@angular/platform-browser-dynamic": "7.2.2",
    "@angular/router": "7.2.2",
    "@ionic-native/core": "^5.5.0",
    "@ionic-native/google-maps": "^5.5.0",
    "@ionic-native/splash-screen": "5.0.0-beta.21",
    "@ionic-native/status-bar": "5.0.0-beta.21",
    "@ionic/angular": "4.0.0",
    "@ionic/storage": "^2.2.0",
    "@types/chart.js": "^2.7.45",
    "ajv": "^6.10.0",
    "an": "0.0.8",
    "angular2-text-mask": "^9.0.0",
    "chart.js": "^2.7.3",
    "cordova-android": "8.0.0",
    "cordova-browser": "5.0.4",
    "cordova-plugin-camera": "^4.0.3",
    "cordova-plugin-device": "^2.0.2",
    "cordova-plugin-googlemaps": "git+https://github.com/mapsplugin/cordova-plugin-googlemaps.git#multiple_maps",
    "cordova-plugin-ionic-keyboard": "^2.1.3",
    "cordova-plugin-ionic-webview": "^4.0.0",
    "cordova-plugin-splashscreen": "^5.0.2",
    "cordova-plugin-whitelist": "^1.3.3",
    "cordova-sqlite-storage": "^2.6.0",
    "cordova-support-google-services": "^1.1.0",
    "core-js": "^2.6.3",
    "google-libphonenumber": "^3.2.2",
    "ionic-selectable": "^4.4.0",
    "moment": "^2.24.0",
    "rxjs": "6.3.3",
    "rxjs-compat": "^6.3.3",
    "socket.io-client": "^2.2.0",
    "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.12",
    "@angular/compiler-cli": "^7.2.12",
    "@angular/language-service": "7.2.2",
    "@ionic/angular-toolkit": "^1.2.2",
    "@ionic/lab": "1.0.19",
    "@types/jasmine": "~3.3.7",
    "@types/jasminewd2": "~2.0.6",
    "@types/node": "~10.12.18",
    "codelyzer": "~4.5.0",
    "jasmine-core": "~3.3.0",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "^4.0.1",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "~2.0.4",
    "karma-jasmine": "~2.0.1",
    "karma-jasmine-html-reporter": "^1.4.0",
    "node-sass": "^4.11.0",
    "protractor": "~5.4.2",
    "ts-node": "~8.0.1",
    "tslint": "~5.12.1",
    "typescript": "~3.2.4"
  },
  "description": "An adaept project",
  "cordova": {
    "plugins": {
      "cordova-plugin-camera": {},
      "cordova-sqlite-storage": {},
      "cordova-plugin-whitelist": {},
      "cordova-plugin-device": {},
      "cordova-plugin-splashscreen": {},
      "cordova-plugin-ionic-keyboard": {},
      "cordova-plugin-ionic-webview": {
        "ANDROID_SUPPORT_ANNOTATIONS_VERSION": "27.+"
      },
      "cordova-plugin-googlemaps": {
        "API_KEY_FOR_ANDROID": "my-API-key",
        "API_KEY_FOR_IOS": "my-API-key",
        "PLAY_SERVICES_VERSION": "15.0.1",
        "ANDROID_SUPPORT_V4_VERSION": "27.+"
      }
    },
    "platforms": [
      "browser",
      "android"
    ]
  }
}

1 Ответ

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

Спасибо, ребята, что помогли мне решить мою проблему.Я вижу карту вместо пустого или серого экрана с логотипом Google.

Шаг 1) Удалите плагин ионных карт Google

Шаг 2) Удалите платформу

Шаг 3)Создать новый ключ API

Шаг 4) Добавить плагин с новым ключом API для ex.Плагин ionic cordova add https://github.com/mapsplugin/cordova-plugin-googlemaps#multiple_maps --variable API_KEY_FOR_ANDROID = "(новый ключ API здесь)" --variable API_KEY_FOR_IOS = "(новый ключ API здесь)" *

Шаг 5) Добавить платформу

Шаг 6) Запустите ионное приложение для отл.Ионное Cordova Run Android / IOS

...