运行时错误无法读取 null 的属性“环境” - Ionic Google Maps

Question

我正在设置我的 Ionic 应用程序，并且我严格按照 Google Maps API 文档进行操作。但是，当我尝试运行 Maps API 时，我一直无法摆脱这个错误：

然后这是我在主页上的完整代码。我确保在 home.html 中放入一个带有id="map_canvas" 的 div，并在 scss 文件中为其设置高度为 100%。从我所见，错误似乎不像环境部分，但我确保我的 API 密钥是正确的，并且我已经运行了相关的科尔多瓦命令来设置谷歌地图插件。我只是看不到什么可能会导致此错误。

import {
  GoogleMaps,
  GoogleMap,
  GoogleMapsEvent,
  GoogleMapOptions,
  Marker,
  Environment
} from '@ionic-native/google-maps';
import { Component } from "@angular/core/";

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

  ionViewDidLoad() {
    this.loadMap();
  }

  loadMap() {

    // This code is necessary for browser
    Environment.setEnv({
      'API_KEY_FOR_BROWSER_RELEASE': 'I_ENTERED_MY_UNRESTRICTED_API_KEY_HERE',
      'API_KEY_FOR_BROWSER_DEBUG': ''
    });

    let mapOptions: GoogleMapOptions = {
      camera: {
        target: {
          lat: 43.0741904,
          lng: -89.3809802
        },
        zoom: 18,
        tilt: 30
      }
    };

    this.map = GoogleMaps.create('map_canvas', mapOptions);

    let marker: Marker = this.map.addMarkerSync({
      title: 'Ionic',
      icon: 'blue',
      animation: 'DROP',
      position: {
        lat: 43.0741904,
        lng: -89.3809802
      }
    });
    marker.on(GoogleMapsEvent.MARKER_CLICK).subscribe(() => {
      alert('clicked');
    });
  }
}

Answer 1

您需要使用

为您想要使用的任何平台（例如浏览器、android、ios）构建它

ionic cordova 构建浏览器 -l

然后这将为它创建环境，因此它将运行。它不能简单地使用 ionic serve