Ionic 3 Google 地图在 Android + IOS 上不显示

Question

我使用 Ionic 3 版本，并尝试在我的应用程序中添加一个页面，以显示带有标记的地图。 我已经在我的应用程序中使用了用于自动完成的 Google 地图 ID（Google 地方...）。 我访问了 Google API，并将 Map Embed、Javascript 等添加到我的 API 密钥中。 但是页面底部出现“谷歌”和显示按钮“，但地图是空的。 见附件...

安装 Cordova 和 Ionic Native 插件：

$ ionic cordova plugin add https://github.com/mapsplugin/cordova-plugin-googlemaps#multiple_maps --variable API_KEY_FOR_ANDROID="AIzaSyB6mEnxH4vC+++++++++9wnXXNNmK2co" --variable API_KEY_FOR_IOS="AIzaSyB6mEnxH4v++++++++++++++ wnXXNNmK2co" $ npm install --save @ionic-native/google-maps

Home.ts：

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

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})

export class HomePage {

  @ViewChild('map') mapElement: ElementRef;
  map: any;
  constructor(public navCtrl: NavController, private googleMaps: GoogleMaps) {

  }
  ngAfterViewInit() {
 this.loadMap();
}

loadMap() {
 // make sure to create following structure in your view.html file
 // and add a height (for example 100%) to it, else the map won't be visible
 // <ion-content>
 //  <div #map id="map" style="height:100%;"></div>
 // </ion-content>

 // create a new map by passing HTMLElement
 let element: HTMLElement = document.getElementById('map');

 let map: GoogleMap = this.googleMaps.create(element);

 // listen to MAP_READY event
 // You must wait for this event to fire before adding something to the map or modifying it in anyway
 map.one(GoogleMapsEvent.MAP_READY).then(
   () => {
     console.log('Map is ready!');
     // Now you can add elements to the map like the marker
   }
 );

 // create CameraPosition
 let position: CameraPosition = {
   target: {
     lat: 43.0741904,
     lng: -89.3809802
   },
   zoom: 18,
   tilt: 30
 };

 // move the map's camera to position
} 
}

主页.HTML

Home.html :
<ion-header>
  <ion-navbar>
    <ion-title>
      Map
    </ion-title>
    <ion-buttons end>
      <button ion-button (click)="addMarker()"><ion-icon name="add"></ion-icon>Add Marker</button>
    </ion-buttons>  
  </ion-navbar>
</ion-header>
 
<ion-content>
<div #map id="map" style="height:100%;"></div> 
</ion-content>

首页.scss

page-home {

}

Answer 1

不要使用ngAfterViewInit。 你必须等待platform.ready()

// Wait the native plugin is ready.
platform.ready().then(() => {
  this.loadMap();
});

完整代码是https://github.com/mapsplugin/cordova-plugin-googlemaps-doc/blob/master/v2.0.0/ionic-native/README.md

回购：https://github.com/mapsplugin/ionic-google-maps

---

当前官方文档页面错误。我发送了一个拉取请求，但它现在正在等待。 https://github.com/ionic-team/ionic-native/pull/1834

Answer 2

请尝试以下代码并确保您使用正确的 API 密钥，在您的 .ts 文件中写入以下代码：

  ionViewDidLoad() {
    this.loadMap();
   }
   loadMap() {

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

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

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

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

          });
      }

在您的 .html 文件中定义如下地图

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