谷歌地图错误 - ReferenceError：谷歌未在离子3应用程序中定义

Question

我正在将谷歌地图加载到我的离子3应用程序页面。当我使用浏览器加载应用程序时，页面加载正常，但是当我使应用程序apk（使用ionic cordova build android --prod）时，如果没有定义ReferenceError：google，则地图不会加载并抛出异常。我已经谷歌搜索了几天，我已经应用了我得到的所有解决方案，但根本没用。任何人都可以帮我解决这个问题。

我的map.ts代码如下：

 import {Component, ViewChild, ElementRef} from '@angular/core';
    import {IonicPage, NavController, NavParams, PopoverController, LoadingController, MenuController} from 'ionic-angular';
    import {Keyboard} from '@ionic-native/keyboard';
    import {Geolocation, Geoposition} from '@ionic-native/geolocation';
    import {NativeGeocoder, NativeGeocoderReverseResult} from '@ionic-native/native-geocoder';
    import {LocationAccuracy} from '@ionic-native/location-accuracy';

declare var google: any;

@IonicPage()
@Component({
  selector: 'page-map',
  templateUrl: 'map.html',
})
export class Map {

  latLng: any;
  @ViewChild('map') mapElement: ElementRef;
  map: any;
  showFooter: boolean = true;

  constructor(public navCtrl: NavController,
              public navParams: NavParams,
              public popoverCtrl: PopoverController,
              private geolocation: Geolocation,
              public locac: LocationAccuracy,
              public loadingCtrl: LoadingController,
              public keyboard: Keyboard,
              private menu: MenuController,
              public geocoder: NativeGeocoder,) {
  }

   ionViewDidLoad() {
     this.getLocation();
     this.menu.swipeEnable(false);
  }

getLocation() {

    this.geolocation.getCurrentPosition().then((resp) => {

      let map = new google.maps.Map(document.getElementById('map'));
      var uluru = {lat: -25.363, lng: 131.044};
      this.latLng = new google.maps.LatLng(resp.coords.latitude, resp.coords.longitude);
      let mapOptions = {
        center: this.latLng,
        zoom: 18,
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        enableHighAccuracy: true
      };

      this.map = new google.maps.Map(this.mapElement.nativeElement, mapOptions);

      let marker = new google.maps.Marker({
        map: this.map,
        animation: google.maps.Animation.DROP,
        position: this.latLng,
        center: this.latLng,
        icon: {
          url: 'assets/img/pin.png',
          size: new google.maps.Size(25, 48)
        },
        optimized: false,
      });

      // geocode reverse
      var geocoder = geocoder = new google.maps.Geocoder();

      var latlng = new google.maps.LatLng(resp.coords.latitude, resp.coords.longitude);
      geocoder.geocode({'latLng': latlng}, function (results, status) {
        console.log(results);
        alert('Status : ' + status);
        this.currentLocation = this.value = "My value";
        if (status == google.maps.GeocoderStatus.OK) {
          if (results[1]) {
            document.getElementById("currentlocation").setAttribute('value', results[1].formatted_address);
          }
        }
      });
      // geocode reverse end

      // Route and direction
      var source, destination;
      var directionsDisplay;
      var directionsService = new google.maps.DirectionsService();
      directionsDisplay = new google.maps.DirectionsRenderer({'draggable': true});

      // current location input
      let currentlocationinput = document.getElementById('currentlocation');
      let currentlocationsearchBox = new google.maps.places.SearchBox(currentlocationinput);
      map.controls[google.maps.ControlPosition.TOP_LEFT].push(currentlocationinput);

      // destination location input
      let destinationinput = document.getElementById('destination');
      let destinationsearchBox = new google.maps.places.SearchBox(destinationinput);
      map.controls[google.maps.ControlPosition.TOP_LEFT].push(destinationinput);

      // Direction
      var directionsService = new google.maps.DirectionsService;
      var directionsDisplay = new google.maps.DirectionsRenderer;
      directionsDisplay.setMap(map);

      // on drag and dragend header style change
      this.map.addListener('dragstart', function (event) {
        document.querySelector(".header")['style'].transform = 'translate3d(0px, -320px, 0px)';
        document.querySelector(".scroll-content").classList.add("no_margin");
        document.querySelector(".footer")['style'].transform = 'translate3d(0px, 320px, 0px)';
      });
      this.map.addListener('dragend', function (event) {
        document.querySelector(".header")['style'].transform = 'translate3d(0px, 0px, 0px)';
        document.querySelector(".scroll-content").classList.remove("no_margin");
        document.querySelector(".footer")['style'].transform = 'translate3d(0px, 0px, 0px)';
      });
      // on drag and dragend header style change end

    }).catch((error) => {
      alert(error);
      console.log('Error getting location', error);
    })

  }
}

我挂了好几天。如果有人能解决，请帮助我。提前致谢。

Answer 1

检查一下，

<script async defer
  src="https://maps.googleapis.com/maps/api/js?key=API_KEY&callback=initMap">
</script>

你可以将它添加到index.js或不

我认为访问时不会加载地图。

Answer 2

[解决了]

几乎要放弃，直到我遇到他的答案。

Mark Veenstra - Solution is here

对于悬挂与我悬挂相同问题的人来说可能是有用的。

干杯..！！