运行时错误无法读取null的属性“ environment”

Question

我正在设置我的Ionic应用程序，并且已经完全遵循Google Maps API文档。但是，当我尝试运行Maps API时，我一直无法摆脱这个错误：

这是我从主页上获得的完整代码。我已经确保在home.html中放入一个div，id="map_canvas"并在scss文件中将其高度设置为100％。从我所看到的，错误似乎不喜欢环境部分，但我确保我的API密钥是正确的，并且我已经运行了相关的cordova命令来设置google maps插件。我只是看不到什么可能导致此错误。

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）构建它

离子Cordova构建浏览器-l

然后这将为其创建环境，从而使其运行。它不能简单地使用离子服务