@ionic-native/google-maps - 在浏览器平台下运行的环境为空答案

【问题标题】：@ionic-native/google-maps - Environment is null running under browser platform@ionic-native/google-maps - 在浏览器平台下运行的环境为空
【发布时间】：2020-08-03 21:24:10
【问题描述】：

我目前正在使用基本 Ngrx-rocket 模板开发 Ionic v5 应用程序并针对 Firebase v7 运行，我目前在为平台浏览器运行 Google Maps 时遇到问题（我的想法是在那里开发所有必需的点然后运行它在一个 android 应用程序上）。

我已阅读在 Internet 上找到的所有文档并关注 StackOverflow 上发现的类似问题，但我仍然无法找到解决方案。这些是我到目前为止所遵循的步骤：

我创建了一个受 URL (localhost:8000) 和 API（地图的 Javascript API）限制的Google Maps API Key
我添加了 @ionic-native/google-maps 插件 (5.5.0) 和 cordova-plugin-googlemaps (2.7.1)
在 firebase 中注册用户后，我在 ion-slide 内的注册页面中设置了以下组件：

import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';

import { GoogleMaps, GoogleMap, GoogleMapsEvent,
         Marker, GoogleMapsAnimation, MyLocation,
         Environment } from '@ionic-native/google-maps';

import { Platform, ToastController } from '@ionic/angular';

import { BaseViewComponent } from '@app/@core/views/base.view.component';

@Component({
  selector: 'nv-register-user-property',
  templateUrl: './register-user-property.component.html',
  styleUrls: ['./register-user-property.component.scss'],
})
export class RegisterUserPropertyComponent extends BaseViewComponent
                                           implements OnInit {
  map: GoogleMap;
  address: string;

  constructor(_router: Router, _platform: Platform, private toastCtrl: ToastController) {
    super(_router, _platform);
  }

  async ngOnInit() {
    await this.platform.ready();
    Environment.setEnv({
      // api key for server
      API_KEY_FOR_BROWSER_RELEASE: MY GOOGLE MAPS API KEY,
      // api key for local development
      API_KEY_FOR_BROWSER_DEBUG: MY GOOGLE MAPS API KEY,
    });
    await this.loadMap();
  }

  loadMap(): void {

    this.map = GoogleMaps.create('map_canvas', {
      camera: {
        target: {
          lat: 43.0741704,
          lng: -89.3809802
        },
        zoom: 18,
        tilt: 30
      }
    });
    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
        const marker: Marker = this.map.addMarkerSync({
          title: 'Example marker',
          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);
      });
  }

  async showToast(msg: string) {
    const toast = await this.toastCtrl.create({
      message: msg,
      duration: 2000,
      position: 'middle',
    });
    toast.present();
  }
}

CSS：

#map_canvas {
  width: 100%;
  height: 80vh;
}

HTML：

<ion-grid class="ion-no-padding">
  <ion-row class="ion-justify-content-center ion-no-padding">
    <ion-col size-sm="8" size-lg="6" size-xl="4" class="ion-align-self-center ion-no-padding">
      <div class="nv-view-container">
        <div id="map_canvas"></div>
      </div>
    </ion-col>
  </ion-row>
</ion-grid>

包含前一个组件的组件具有以下模板

<ion-header *ngIf="hasRouteBack">
  <ion-toolbar>
    <ion-buttons slot="start">
      <ion-back-button></ion-back-button>
    </ion-buttons>
  </ion-toolbar>
</ion-header>
<ion-content fullscreen scroll-y="false">
  <div class="nv-view-header ion-padding">
    <h1>Register</h1>
  </div>
  <ion-slides [options]="{ allowTouchMove: false}">
    <!-- REGISTRATION PHASE I - REGISTER USER IN FIREBASE -->
    <ion-slide>
      <nv-register-firebase-user (registeredUserOnFirebase)="navigateToRegisterProperty($event)"> </nv-register-firebase-user>
    </ion-slide>
    <!-- REGISTRATION PHASE II - REGISTER USER'S PROPERTY -->
    <ion-slide>
      <nv-register-user-property></nv-register-user-property>
    </ion-slide>
    <!-- WAIT FOR AN EMAIL IN ORDER TO ACCESS AGAIN -->
    <ion-slide> </ion-slide>
  </ion-slides>
</ion-content>

我已经构建了 Cordova 平台浏览器 (ionic cordova build browser -l) --> 构建成功
我已经运行 Cordova 浏览器 (ionic cordova run "browser") --> 我能够导航到注册页面，第一阶段幻灯片显示正常，但控制台日志中有一个错误，我相信它与第二阶段有关运行 Environment.setEnv：

ERROR Error: Uncaught (in promise): TypeError: Cannot read property 'environment' of null
TypeError: Cannot read property 'environment' of null
    at Function.t.setEnv (main-es2015.12d25dc45bb2cb26c0b5.js:1)
    at t.<anonymous> (main-es2015.12d25dc45bb2cb26c0b5.js:1)
    at Generator.next (<anonymous>)
    at s (main-es2015.12d25dc45bb2cb26c0b5.js:1)
    at l.invoke (polyfills-es2015.a297156131f0162b89cd.js:1)
    at Object.onInvoke (main-es2015.12d25dc45bb2cb26c0b5.js:1)
    at l.invoke (polyfills-es2015.a297156131f0162b89cd.js:1)
    at i.run (polyfills-es2015.a297156131f0162b89cd.js:1)
    at polyfills-es2015.a297156131f0162b89cd.js:1
    at l.invokeTask (polyfills-es2015.a297156131f0162b89cd.js:1)
    at T (polyfills-es2015.a297156131f0162b89cd.js:1)
    at polyfills-es2015.a297156131f0162b89cd.js:1
    at s (main-es2015.12d25dc45bb2cb26c0b5.js:1)
    at l.invoke (polyfills-es2015.a297156131f0162b89cd.js:1)
    at Object.onInvoke (main-es2015.12d25dc45bb2cb26c0b5.js:1)
    at l.invoke (polyfills-es2015.a297156131f0162b89cd.js:1)
    at i.run (polyfills-es2015.a297156131f0162b89cd.js:1)
    at polyfills-es2015.a297156131f0162b89cd.js:1
    at l.invokeTask (polyfills-es2015.a297156131f0162b89cd.js:1)
    at Object.onInvokeTask (main-es2015.12d25dc45bb2cb26c0b5.js:1)

我还收到以下控制台警告消息

Native: tried accessing the GoogleMaps plugin but Cordova is not available. Make sure to include cordova.js or run in a device/simulator

那么我在这里缺少什么？有没有办法调试平台浏览器？（好像是在发布代码下运行的）

【问题讨论】：

标签： angular cordova ionic-framework google-maps-api-3

【解决方案1】：

Environment.setEnv({...}) 应该属于loadMap() 函数。
尝试在platform.ready() 中调用loadMap() 函数，因为现在它只是在平台为ready() 之前调用。

【讨论】：

【解决方案2】：

我遇到了同样的问题，但插件 @ionic-native/google-maps 没有正确安装。就在行前

Environment.setEnv({

尝试添加

console.log(GoogleMaps.getPlugin());

如果 null 您的应用找不到插件并且无法获取“环境”...

【讨论】：