Ionic 3.20 和 googlemaps 插件答案

【问题标题】：Ionic 3.20 and googlemaps pluginIonic 3.20 和 googlemaps 插件
【发布时间】：2020-03-14 06:44:15
【问题描述】：

（抱歉我的英语不好）我有一个应用程序 @ ionic / cli-utils: 1.19.2, ionic (Ionic CLI): 3.20.0，我尝试通过相应的插件使用 GoogleMaps native。我做不到，总是得到同样的错误。如果你能帮助我，谢谢。我即将离开 Ionic 使用它的地图插件。非常感谢！

ERROR TypeError: Cannot read property 'constructor' of undefined.

我安装了插件（安装了2.6.2版本）：

ionic cordova 插件添加 cordova-plugin-googlemaps

npm install --save @ionic-native/google-maps

从 2.6.0 开始。密钥在 config.xml 中，而不是在 add 插件中。对吗？

在 config.xml 中：

<preference name="GOOGLE_MAPS_ANDROID_API_KEY" value="xxx" />
<preference name="GOOGLE_MAPS_IOS_API_KEY" value="yyy" />

and... 

<plugin name="cordova-plugin-googlemaps" spec="^2.6.2">
<variable name="PLAY_SERVICES_VERSION" value="15.0.1" />
<variable name="ANDROID_SUPPORT_V4_VERSION" value="27.+" />
</plugin>

我发送代码和离子信息：

map.html:

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

map.ts：

import { Component } from '@angular/core';
import { IonicPage, NavController, Platform, NavParams } from 'ionic-angular';
import { Geolocation } from '@ionic-native/geolocation';
import { GoogleMaps, GoogleMap, GoogleMapsEvent, LatLng } from '@ionic-native/google-maps';

@IonicPage()
@Component({
  selector: 'page-map',
  templateUrl: 'map.html'
})
export class MapPage {
  map: GoogleMap;
  public lat_mapa;
  public lng_mapa;
  constructor(
    public navCtrl: NavController,
    public navParams: NavParams,
    public geolocation: Geolocation,
    public googleMaps: GoogleMaps,
    private platform: Platform
  ) {  }

  ionViewDidLoad() {
    this.platform.ready().then(() => {
      // 2 DIFFERENT CREATE MODELS, WHICH I FOUND ON THE INTERNET (use one or the other)
      this.map = GoogleMaps.create('map_canvas');  ON THIS LINE MAKES THE ERROR
      this.map = this.googleMaps.create('map_canvas');  ON THIS LINE IT ALSO MAKES THE SAME ERROR
      this.map.one(GoogleMapsEvent.MAP_READY).then((data: any) => {
        let myPosition: LatLng = new LatLng(41.390295, 2.154007);
        this.map.animateCamera({ target: myPosition, zoom: 10 });
      })
    })
    this.loadMap();
  }

loadMap() {
    // Wait the MAP_READY before using any methods.
    this.map.one(GoogleMapsEvent.MAP_READY)
      .then(() => {
        // Now you can use all methods safely.
        this.getPosition(); // not included because it is not necessary 
      })
      .catch(error => {
        console.log(error);
      });
  }

Ionic info:
@ionic/cli-utils  : 1.19.2
ionic (Ionic CLI) : 3.20.0
global packages:
cordova (Cordova CLI) : 8.0.0
local packages:
@ionic/app-scripts : 3.2.3
 Cordova Platforms  : android 7.0.0
Ionic Framework    : ionic-angular 3.9.2
System:
Android SDK Tools : 26.1.1
    Node              : v8.11.3
    npm               : 5.6.0
    OS                : Windows 8.1

【问题讨论】：

标签： ionic3

【解决方案1】：

这通常是插件版本不匹配的问题，这就是出现该错误的原因：你可以试试这个版本，因为这个版本仍然支持 ionic 3

npm install @ionic-native/google-maps@4.21.0

希望能解决问题

【讨论】：