Google maps 谷歌地图本地科尔多瓦插件与离子3只显示一个灰色框

我试图得到一张地图显示，我得到的只是一个底部有谷歌标志的灰色方框。我看过这个网站上的其他帖子，都试过了，但没有一篇能解决这个问题。 我正在使用ionic 3.12.0和cordova插件googlemaps 2.0.7 我已确保API密钥正确并在仪表板中启用

我试过使用下面的教程是代码

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


import { Component, Input, ViewChild } from '@angular/core';
import { Platform } from 'ionic-angular';

@Component({
  selector: 'map',
  template: '<div #map id="map"></div>'
})
export class Map {

  map: GoogleMap;
  mapElement: HTMLElement;
  constructor(private googleMaps: GoogleMaps) { }

  setMapLocation(coords: any) {
    this.map.setCameraTarget(coords);
  }

  ionViewDidLoad() {
   this.loadMap();
  }

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

  let mapOptions: GoogleMapOptions = {
    camera: {
      target: {
        lat: 43.0741904,
        lng: -89.3809802
      },
      zoom: 18,
      tilt: 30
    }
  };

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

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

      // Now you can use all methods safely.
      this.map.addMarker({
          title: 'Ionic',
          icon: 'blue',
          animation: 'DROP',
          position: {
            lat: 43.0741904,
            lng: -89.3809802
          }
        })
        .then(marker => {
          marker.on(GoogleMapsEvent.MARKER_CLICK)
            .subscribe(() => {
              alert('clicked');
            });
        });

    });
}}

---

我也有同样的问题

这对我有用

删除谷歌地图插件 移除平台

使用不同的API密钥重新添加插件

---

重新添加平台可能有各种原因

谷歌地图Android API（或用于iOS的谷歌地图SDK）应在谷歌云控制台中启用

检查Google API密钥的有效性和限制

使用@angular/core中的ElementRef而不是HTMLElement

试试这个：

转到

您将必须设置帐单（您将不会被收取费用）

搜索：API

启用Android地图SDK

为iOS启用地图SDK

生成API密钥

创建一个新的ionic项目，当询问是否需要cordova支持时，按Y键

ionic start yourProjectName blank

完成后做什么

cd yourProjectName

将平台添加到项目中

ionic cordova platform add ios

ionic cordova platform add android

然后跑

ionic cordova plugin add cordova-plugin-googlemaps --variable API_KEY_FOR_ANDROID="YourGeneratedApiKeyFromGoogleCloudPlatform" 
  --variable API_KEY_FOR_IOS="YourGeneratedApiKeyFromGoogleCloudPlatform"

npm install --save @ionic-native/core@latest @ionic-native/google-maps@latest

然后跑

ionic cordova plugin add cordova-plugin-googlemaps --variable API_KEY_FOR_ANDROID="YourGeneratedApiKeyFromGoogleCloudPlatform" 
  --variable API_KEY_FOR_IOS="YourGeneratedApiKeyFromGoogleCloudPlatform"

npm install --save @ionic-native/core@latest @ionic-native/google-maps@latest

现在，您已经安装了所有组件，需要将模块导入ts文件

在您的app.module.ts

中，从“@ionic native/google maps”导入{GoogleMaps}

并将GoogleMaps添加到提供者数组中

providers: [
    StatusBar,
    SplashScreen,
    GoogleMaps,
    {provide: ErrorHandler, useClass: IonicErrorHandler}
  ]

现在您需要设置TS、HTML和SCS

我将粘贴前面所有步骤的工作代码

home.ts

import {
  GoogleMaps,
  GoogleMap,
  GoogleMapsEvent,
  GoogleMapOptions,
  CameraPosition,
  MarkerOptions,
  Marker
} from '@ionic-native/google-maps';
import { Component } from "@angular/core/";

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {
  map: GoogleMap;
  constructor() { }

  ionViewDidLoad() {
    this.loadMap();
  }

  loadMap() {

    let mapOptions: GoogleMapOptions = {
      camera: {
         target: {
           lat: 43.0741904,
           lng: -89.3809802
         },
         zoom: 18,
         tilt: 30
       }
    };

    this.map = GoogleMaps.create('map_canvas', mapOptions);

    let marker: Marker = this.map.addMarkerSync({
      title: 'Ionic',
      icon: 'blue',
      animation: 'DROP',
      position: {
        lat: 43.0741904,
        lng: -89.3809802
      }
    });
  }
}

home.html

<ion-content padding>
  <h3>Ionic GoogleMaps Starter</h3>
 
  <div id="map_canvas">
    <button ion-button >Start demo</button>
  </div>
</ion-content>

如果地图仍为灰色，则表示API密钥未在正确的位置使用

检查这些文件

config.xml

package.json

和platforms/android/app/src/main/AndroidManifest.xml

这3个文件具有您的API密钥

检查其中的密钥，并将其与您的进行比较

不要编辑AndroidManifest.xml，它在生成时会被重写

---

祝您好运

查看此示例教程了解爱奥尼亚4，我只为以前的工作中的密钥启用了javascript API。一旦你找到它，很容易修复。。。