google-maps - Ionic native Google map 无法正确显示

Question

几周前，我遇到了 Google map ionic native 模块的问题，我做了一个 question (未解决)。

---

现在我在空白页面中进行测试，并且显示了 map ，但它看起来像:

这是我的 xml 文件，其中有包含 map 的 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 创建 map

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 Logo ，因此您的代码没有问题。

问题在于您的 api key 。

您需要尝试重新生成 API key ，然后重新安装。 确保您在生成 API key 之前启用了 google map android api v2 和适用于 ios 的 google map sdk。

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

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