带有 Ionic 3 的 Google Maps Native cordova 插件仅显示一个灰色框答案

【问题标题】：Google Maps Native cordova plugin with Ionic 3 only showing a grey box带有 Ionic 3 的 Google Maps Native cordova 插件仅显示一个灰色框
【发布时间】：2018-03-06 16:14:54
【问题描述】：

我正在尝试显示地图，但我得到的只是一个底部带有谷歌徽标的灰色框。我查看了该网站上的其他帖子，并尝试了所有帖子，但似乎没有一个可以修复它。我正在使用带有cordova插件googlemaps 2.0.7的ionic 3.12.0 我已确保 API 密钥正确并在仪表板中启用。

我试过使用教程https://ionicframework.com/docs/native/google-maps/下面是代码

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

    });
}}

我添加的 CSS 是

#map {
    width: 100% !important;
    height: 100% !important;
    img{ max-width: none !important; }
    overflow:visible !important;
    z-index: 1;
}

ion-app._gmaps_cdv_ .nav-decor{
  background-color: transparent !important;
}

【问题讨论】：

github.com/mapsplugin/cordova-plugin-googlemaps-doc/blob/master/…

标签： google-maps cordova ionic2 cordova-plugins

【解决方案1】：

我遇到了同样的问题，

这对我有用。

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

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

【讨论】：

【解决方案2】：

可能有多种原因。

应在您的谷歌云控制台中启用 Google Maps Android API（或适用于 iOS 的 Google Maps SDK）。

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

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

试试这个：https://codeburst.io/native-google-maps-and-geolocation-ionic-fe635a00249d

【讨论】：

我只为之前工作中的密钥启用了 javascript API。找到后轻松修复...

【解决方案3】：

转到console.cloud.google.com

您必须设置帐单（不会向您收费）

搜索：API

为 Android 启用 Maps SDK

为 iOS 启用 Maps 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

所以现在你已经安装了所有东西，你需要将模块导入到你的 ts 文件中。

在你的 app.module.ts import { GoogleMaps } from '@ionic-native/google-maps' 并将 GoogleMaps 添加到 providers 数组中

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

现在你需要设置你的 TS、HTML 和 SCSS

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

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>

home.scss

page-home {
    #map_canvas {
      height: 90%;
    }
  }

如果地图仍然是灰色的，则表示您的 API 密钥没有在正确的地方使用。

检查这些文件

config.xml

package.json

和平台/android/app/src/main/AndroidManifest.xml

这 3 个文件有你的 API 密钥

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

不要编辑 AndroidManifest.xml，它会在您构建时被重写。

祝你好运

【讨论】：