问题
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');
});
}
}
回答1:
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
来源:https://stackoverflow.com/questions/52657414/runtime-error-cannot-read-property-environment-of-null