Ionic 本机 Google 地图 Android 无法正常工作

我必须在我的项目中添加带有 Google 地图的视图。我跟着官方 ionic 本机 Google 地图文档 https://ionicframework.com/docs/native/google-maps/但它不起作用。

我将背景颜色粉红色分配给包含地图的 div（用于测试），在将地图添加到 div 之前，div 显示正确。但是，当将地图添加到 div 时，模式窗口的背景变为透明，并且 div 消失。但没有显示错误。

我尝试了不同的方法将地图附加到 div 上，但结果是相同的。

当我使用 Ionic 文档的代码时，我收到此错误消息“GoogleMaps [已弃用] 请使用 GoogleMaps.create()”。我尝试使用 GoogleMaps.create() 而不是构造函数的参数来避免此错误消息，但仍然无法正常工作。

我的离子含量：

<ion-content fullscreen overflow-scroll="true" class="container">

  <div #map id="map"></div>

</ion-content>

部分CSS：

#map {
        height: 90%;
        width: 100%;
        border-width: 5px;
        border-color: red;
        background: pink;
    }

这里我们得到了 ts 的片段：

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

...

export class PerfilPage {
  @ViewChild(Content) content: Content;
  @ViewChild('map') mapElement: ElementRef;
  map: GoogleMap;

...

ionViewDidLoad() {
// I use this for changing the nab-bar color
    this.content.ionScroll.subscribe((scroll) => {
      // console.log('user scrolled', scroll);
      if ( scroll.scrollTop > 100 ) {
        this.toolbar_color = "bg_search"
      } else {
        this.toolbar_color = "transparent"
      }
      this.ref.detectChanges();
    });

    // this.loadMap();
    // this.initMap();
    // this.testMap();
    this.offiMap();
  }

// Official Ionic documentation code
 offiMap() {
    let mapOptions: GoogleMapOptions = {
      camera: {
        target: {
          lat: 43.0741904,
          lng: -89.3809802
        },
        zoom: 18,
        tilt: 30
      }
    };

    this.map = this.googleMaps.create('map', 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');
              });
          });

      });
  }
}

PS：API 密钥适用于其他项目（不适用于 Ionic 项目），所以我不知道问题出在哪里。

谢谢 ：）

正如我在 git 存储库中所描述的，地图插件将本机地图视图放置在浏览器下方（或后面）。

https://github.com/mapsplugin/cordova-plugin-googlemaps#how-does-this-plugin-work https://github.com/mapsplugin/cordova-plugin-googlemaps#how-does-this-plugin-work

这就是为什么地图 div 的所有父元素都变得透明的原因。

如果需要设置应用程序的背景，则需要使用Environment.setBackground("pink").

由于地图是在浏览器下显示的，所以这个插件CAN NOT显示在对话框上。