Google Maps Ionic Native 在 android 和 ios 中显示空白页

Question

我是 ionic 的新手，我正在尝试将 google 地图与 ionic-native-googlemaps 集成到我的应用程序中。在我的浏览器中它工作正常但是当我为 android 或 ios 构建时我有一个空白页面，如果我在 [=31] 查看 google chrome 的控制台=] chrome://inspect/device 我没有错误。

这是我的打字稿文件

import {AfterViewInit, Component, OnInit} from '@angular/core';
import {
  GoogleMaps,
  GoogleMap,
  GoogleMapsEvent,
  MarkerOptions,
  Marker,
  Environment, LatLng, GoogleMapOptions
} from '@ionic-native/google-maps/ngx';
import { ActionSheetController, Platform, AlertController } from '@ionic/angular';

@Component({
  selector: 'app-favoris',
  templateUrl: './favoris.component.html',
  styleUrls: ['./favoris.component.scss'],
})
export class FavorisComponent implements OnInit, AfterViewInit {
  map: GoogleMap;
  constructor(
    public alertController: AlertController,
    public actionCtrl: ActionSheetController,
    private platform: Platform
  ) {
  }

  ngOnInit() {
    // await this.platform.ready();
    // await this.loadMap();
  }

  ngAfterViewInit() {
    this.platform.ready().then( () => {
      this.loadMap();
    });
  }


  loadMap() {

    const map = GoogleMaps.create('map');

    map.one( GoogleMapsEvent.MAP_READY ).then( ( data: any ) => {

      const coordinates: LatLng = new LatLng( 45.649864, -73.584213 );
      const position = {
        target: coordinates,
        zoom: 14
      };

      map.animateCamera( position );

      const markerOptions: MarkerOptions = {
        position: coordinates,
        // icon: "https://cdn0.iconfinder.com/data/icons/small-n-flat/24/678111-map-marker-512.png",
        title: 'Hello California',
        draggable: true
      };

      const marker = map.addMarker( markerOptions )
        .then( ( markesr: Marker ) => {
          markesr.showInfoWindow();
        });

    });
  }
}

在我的 html 文件中有

<ion-app>
    <ion-header translucent>
        <ion-toolbar>
            <ion-title>List</ion-title>
        </ion-toolbar>
        <ion-toolbar class="new-background-color">
            <ion-title class="text-center text-white">Favoris</ion-title>
        </ion-toolbar>
    </ion-header>
    <ion-content>
        <div id="map" style="height:100%;"></div>
    </ion-content>
</ion-app>

我到处寻找解决方案，但我没有找到任何东西。

Answer 1

终于解决了我的问题，如果以后有人遇到同样的问题，只需降级 ionic-google maps 和 ionic core 这样的版本

"@ionic-native/core": "^5.24.0",
"@ionic-native/google-maps": "^5.0.0-beta.20",

之后看看你的 div 和 who contains google 是否有 500px 或更高，如果没问题，你的地图工作正常，你需要支付 google 地图也是。

Answer 2

您不必降级 googleMap。有两种方法可以解决这个问题：

首先你可以把标签DIV放在ion-content

外面

 <div id="map" style="height:100%;"></div>
      <ion-content>

    </ion-content>

或者您可以添加样式 css 使内容背景透明以覆盖地图屏幕。

Answer 3

在我的例子中，它在 Android 上正确显示，但在 IOS 上没有显示。 API 钥匙没问题。地图在那里，在 html 下方，但离子含量不透明。

尝试将其添加到您的全局 scss 或 css 文件中。

._gmap_cdv_ {
     --background: transparent !important;
}

Google Maps Ionic Native 在 android 和 ios 中显示空白页

Google Maps Ionic Native show blank page in android and ios

ionic-framework

ionic2

ionic-native

ionic3

ionic4