带有Ionic 3的Google Maps Native cordova插件仅显示灰色框 [英] Google Maps Native cordova plugin with Ionic 3 only showing a grey box

问题描述

我正在尝试显示一张地图，我得到的是一个灰色的盒子，底部有谷歌徽标。我查看了这个网站上的其他帖子，并尝试了所有这些帖子，但似乎都没有解决它。
我正在使用离子3.12.0与cordova插件googlemaps 2.0.7
我已确保API密钥正确并在仪表板中启用。

I'm trying to get a map showing and alls I get is a grey box with the google logo at the bottom of it. I've looked at the other posts on this website, and tried them all and none of them seem to fix it. I'm using ionic 3.12.0 with cordova plugin googlemaps 2.0.7 I've made sure the API key is correct and enabled in the dashboard.

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

I've tried using the tutorials https://ionicframework.com/docs/native/google-maps/ below is the code

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

推荐答案

我遇到了同样的问题，

I had the same problem,

这对我有用。

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

Remove the google maps plugin Remove the platforms

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

Re add the plugin with a different API Key Re add the platforms

这篇关于带有Ionic 3的Google Maps Native cordova插件仅显示灰色框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！