运行时错误无法读取null的属性“环境"-Ionic Google Maps [英] Runtime Error Cannot read property 'environment' of null - Ionic Google Maps

问题描述

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

然后这是我在主页上的完整代码.我确保将home.html中的

和id="map_canvas"放入div中，并在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');
    });
  }
}

解决方案

您需要使用

为您要使用的任何平台(例如浏览器，android，ios)构建它

ionic cordova构建浏览器-l

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

I'm setting up my Ionic app and I've followed the Google Maps API documentation precisely. However, I have not been able to escape this error I keep getting when I try to run the Maps API:

And then this is my full code from the HomePage. I have made sure to put in a div in the home.html with the id="map_canvas" as well as set the height to 100% in the scss file for it. From what I've seen, the error seems to not like the Environment part, but I have made sure my API key is correct and I've run the correlating cordova commands to set up the google maps plug in. I just cannot see what could be causing this error.

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');
    });
  }
}

解决方案

You need to build it for whatever platform that you want to use (ex. browser, android, ios) using

ionic cordova build browser -l

and then this will create the environment for it and thus it will be running. It does not simply work using ionic serve

这篇关于运行时错误无法读取null的属性“环境"-Ionic Google Maps的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！