离子原生谷歌地图显示不正确

Question

几周前我遇到了 Google maps ionic 原生模块的问题，我发了一个question（未解决）。

---

现在我在空白页中进行测试并显示了地图，但它看起来像：

这是我的 xml 文件，其中有包含地图的 div。

<ion-header>
  <ion-navbar>
    <ion-title>maptest</ion-title>
  </ion-navbar>
</ion-header>

<ion-content style="background: pink;">
  <div #map id="map" style="height: 80%;"></div>
</ion-content>

这里有 ts 文件。这里我使用 ViewChild 创建地图

import { Component, ViewChild, ElementRef } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';

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

/**
 * Generated class for the MaptestPage page.
 *
 * See http://ionicframework.com/docs/components/#navigation for more info
 * on Ionic pages and navigation.
 */

@IonicPage()
@Component({
  selector: 'page-maptest',
  templateUrl: 'maptest.html',
})
export class MaptestPage {
  @ViewChild('map') mapElement: ElementRef;
  map: GoogleMap;

  constructor(public navCtrl: NavController, public navParams: NavParams, private _googleMaps: GoogleMaps) {
  }

  ngAfterViewInit() {
    console.log('ngAfterViewInit');
    this.initMap();
  }

  initMap() {    
    let element = this.mapElement.nativeElement;
    this.map = GoogleMaps.create(element, {});//this._googleMaps.create(element);


    // Wait the MAP_READY before using any methods.
    this.map.one(GoogleMapsEvent.MAP_READY).then(() => {
      console.log('Map is ready!');

    }).catch( err =>{
      console.error("Error maperino --> "+err);
    });
  }

  moveCamera(location: LatLng) {
    let options = {
      target: location,
      zoom: 18,
      tilt: 30
    }

    this.map.moveCamera(options);
  }

}

我不知道我做错了什么:(

Answer 1

由于您可以看到 google 徽标，因此您的代码很好。

问题在于您的 api 密钥。

您需要尝试重新生成 API 密钥，然后重新安装它。 确保在生成 api 密钥之前启用 google maps android api v2 和 google maps sdk for ios。

https://github.com/mapsplugin/cordova-plugin-googlemaps-doc/blob/master/v1.4.0/TroubleShooting/Blank-Map/README.md

即使您尝试了这些步骤，但仍然得到灰色地图，请直接与我联系。我会检查的。

Answer 2

这是一个答案，因为我没有添加评论的声誉。

尝试添加平台提供程序，然后在构造函数中使用平台就绪来初始化您的地图。

contructor(public navCtrl: NavController,
           public navParams: NavParams,
           private _googleMaps: GoogleMaps,
           private _platform: Platform){
 this.platform.ready().then(() => {
   this.initMap();
 });
}

编辑：也可能是缩放，尝试缩小

EDIT2：看看这张关于 ionic 和 google-maps native 的幻灯片 https://docs.google.com/presentation/d/1zlkmoSY4AzDJc_P4IqWLnzct41IqHyzGkLeyhlAxMDE/edit#slide=id.g292c767148_0_47