Question

我是离子的新手，并整合谷歌地图我的应用程序之一。我已经使用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>

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

请帮助我。

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

这应该可以正常工作。

IONIC 3谷歌地图准备就绪，但没有显示在地图上

1 个答案: