IONIC 3 谷歌地图已准备就绪，但地图中未显示任何内容答案

【问题标题】：IONIC 3 google map is ready but nothing showing in the mapIONIC 3 谷歌地图已准备就绪，但地图中未显示任何内容
【发布时间】：2018-08-19 00:38:46
【问题描述】：

我是 ionic 新手，我的应用程序之一是集成谷歌地图。我已经使用 apikey 安装了谷歌地图插件并在这里编写了一些代码：

@ViewChild('map') mapElement: ElementRef;



map: GoogleMap;
  spaArray:any = []

  setupLocation(){
    this.location = new LatLng(42.346903, -71.135101);
    //Add cluster locations
    this.locations.push({position: {lat: 42.346903, lng: -71.135101}});
    this.locations.push({position: {lat: 42.342525, lng: -71.145943}});
    this.locations.push({position: {lat: 42.345792, lng: -71.138167}});
    this.locations.push({position: {lat: 42.320684, lng: -71.182951}});
    this.locations.push({position: {lat: 42.359076, lng: -71.0645484}});
    this.locations.push({position: {lat: 42.36, lng: -71.1}});
  }
  ionViewDidLoad() {
    this.provider.presentLoadingDefault()
     this.platform.ready().then(() => {
       // let element = this.mapElement.nativeElement;
       let element: HTMLElement = document.getElementById(this.mapElement.nativeElement);
       this.map = this.googleMaps.create(this.mapElement.nativeElement);
      // this.map.clear();
       this.map.one(GoogleMapsEvent.MAP_READY).then(() => {
         this.provider.hideLoader()
         let options = {
           target: this.location,
           zoom: 8
         };
         this.map.moveCamera(options);
         setTimeout(() => {this.addCluster()}, 500);
       });
     });
  }

html在这里

<ion-content>

  <div #map style="height: 100%" id="map"></div>

</ion-content>

但是当我在我的手机中运行该应用程序时，它只显示空白地图，底部带有谷歌徽标。

请帮帮我。

【问题讨论】：

你的html代码在哪里？并且您有没有在手机中激活互联网？
你能用你的代码设置stackblitz.com吗？
@Stephan 我会试试你的建议。

标签： google-maps ionic-framework

【解决方案1】：

这里有一个工作示例：

    import {
  GoogleMaps,
  GoogleMap,
  GoogleMapsEvent,
  GoogleMapOptions,
  CameraPosition,
  MarkerOptions,
  Marker,
  MarkerCluster,
  LatLng,
  HtmlInfoWindow,
  MyLocation
} from '@ionic-native/google-maps';

在你的班级里：

    private mapElement: HTMLElement;
    private map: GoogleMap;

在你的 platform.ready().then() 中

    this.mapElement = document.getElementById('map');

      // DEFINE YOUR OWN MAP SETTINGS
      let mapOptions: GoogleMapOptions = {
        controls: {
          indoorPicker: true
        },
        gestures: {
          rotate: true,
          scroll: true,
          tilt: true,
          zoom: true
        },
        preferences: {
          building: true,
          zoom: {
            maxZoom: 20,
            minZoom: 1
          }
        }
      };

      this.map = GoogleMaps.create(this.mapElement, mapOptions);

      // Wait the MAP_READY before using any methods.
      this.map.one(GoogleMapsEvent.MAP_READY)
        .then(() => {
          // DO MAP STUFF HERE
        });

这应该可以正常工作。

【讨论】：