Google地图未在Android上使用Ionic2

Question

我正在制作移动应用程序，主要是按照Ionic的doc页面中的示例。目的是使用Android的地理定位服务获取用户的经度和经度，并使用Google地图服务显示位置。

地理定位服务按预期工作，当有权访问设备的位置时，应用程序中的纬度和经度会正确显示并每隔几秒更新一次。

谷歌地图服务是我无法工作的：我只得到一个浅灰色的方块，从来没有任何类型的更新。相关代码：

geo.ts：

import { Component, OnInit, ViewChild } from '@angular/core';
import { NavController } from 'ionic-angular';

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

@Component({
  selector: 'geo-contact',
  templateUrl: 'geo.html'
})
export class GeoPage implements OnInit {

  private watch;
  private lat=0;
  private lng=0;
  private map: GoogleMap;
  private mapReady=false;

  @ViewChild('mapCanvas') mapCanvas;

  constructor(public navCtrl: NavController, private geolocation: Geolocation) {

  }

  ngOnInit() {
    this.watch = this.geolocation.watchPosition();
    this.watch.subscribe((data)=>{
        this.lat=data.coords.latitude;
        this.lng=data.coords.longitude;
        console.log('map ready? '+this.mapReady);
        if(this.mapReady){
            console.log('updating map position');
            this.map.moveCamera({
                target: {
                    lat: this.lat,
                    lon: this.lng
                },
                zoom: 8,
                tilt: 0
            });
        }
    });
  }

  ionViewDidLoad(){
    console.log('ionViewDidLoad');
    this.loadMap();
  }

  loadMap(){
    let mapOptions: GoogleMapOptions = {
        camera: {
            target: {
                lat: this.lat,
                lon: this.lng
            },
            zoom: 8,
            tilt: 0
        },
        'mapType': 'MAP_TYPE_NORMAL'
    };

    this.map = GoogleMaps.create(this.mapCanvas.nativeElement, mapOptions);

    console.log('GoogleMaps.create called, waiting for GoogleMapsEvent.MAP_READY');

    this.map.one(GoogleMapsEvent.MAP_READY)
            .then(()=>{
                console.log('GoogleMapsEvent.MAP_READY fired');
                this.mapReady=true;
                this.map.addMarker({
                    title: 'You\'re Here',
                    icon: 'blue',
                    animation: 'DROP',
                    position: {
                        lat: this.lat,
                        lng: this.lng
                    }
                })
                .then(marker => {
                    marker.on(GoogleMapsEvent.MARKER_CLICK)
                        .subscribe(()=>{
                            alert('clicked');
                        });
                });
            });

    this.map.one(GoogleMapsEvent.MAP_LOADED)
            .then(()=>{
                console.log('GoogleMapsEvent.MAP_LOADED fired');
            });
  }
}

geo.html：

<ion-header>
  <div id="pre-navbar" style="display: inline-block;"><img src="./assets/imgs/logo-educacion.svg" style="height:40px;"></div>
  <ion-navbar color="primary">
    <ion-title>
      Maps
    </ion-title>
  </ion-navbar>
</ion-header>
<ion-content>
  <div *ngIf="lat!=0 && lng!=0">
    <ion-list>
      <ion-item>LATITUDE: {{lat}}</ion-item>
      <ion-item>LONGITUDE: {{lng}}</ion-item>
    </ion-list>
  </div>
  <div *ngIf="lat==0 || lng==0">
    <img src="./assets/imgs/Spinner-1s-200px.gif" style="height:40px;display:block;margin-left:auto;margin-right:auto;margin-top:20px;">
  </div>
  <div style="position:absolute;width:100%;height:100%;" padding>
    <div #mapCanvas data-tap-disabled="true" style="min-width: 200px; min-height: 200px; height:80%;"></div>
  </div>
</ion-content>

正如你所看到的，我已经向控制台添加了输出以记录mapReady的状态，一旦GoogleMapsEvent.MAP_READY被触发，它只会变为true，这是我在一段时间后得到的输出，表明它永远不会触发（'fetched quote'日志属于不同视图的功能）：

对示例代码的细微更改是根据不同的解决方案进行的，例如使用@ViewChild和一些玩杂耍的元素的高度属性，但我所能做的就是从无显示到浅灰色框。我非常感谢帮助您正确显示地图服务。

屏幕输出：

编辑1：

我正在使用Cordova 8.0.0并在移动设备上运行应用程序，通过chrome://inspect进行调试。

Answer 1

空白地图总是api关键问题。 https://github.com/mapsplugin/cordova-plugin-googlemaps-doc/blob/master/v1.4.0/TroubleShooting/Blank-Map/README.md

检查您的所有设置，或尝试新的API密钥。

Answer 2

先做几个检查：

1. 您是在浏览器中运行还是在设备/模拟器上运行？因为GoogleMaps原生插件仅与iOS和Android兼容，而不与浏览器兼容。如果您的应用也必须在浏览器中工作，请查看Google Maps Javascript SDK。这里有一些很好的教程：https://www.joshmorony.com/ionic-2-how-to-use-google-maps-geolocation-video-tutorial/
2. 接下来运行ionic info并检查您是否拥有最新版本的Cordova（目前为8.0.0）。如果没有安装或升级它。目前的Google Maps Cordova插件需要7.1或更高版本。
3. 然后按照说明在：https://ionicframework.com/docs/native/google-maps/上安装Cordova插件
4. 在您的代码中，请确保仅在平台准备好时调用loadMap()。
5. 请注意，在Ionic中使用实时重新加载时，目前在加载Cordova插件时出现问题。见：https://github.com/ionic-team/ionic-app-scripts/issues/1354

最小的工作示例是：

import { Component, ViewChild } from '@angular/core';
import { Platform } from 'ionic-angular';
import { GoogleMaps, GoogleMap, GoogleMapsEvent} from '@ionic-native/google-maps';

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

  private map: GoogleMap;

  @ViewChild('mapCanvas') mapCanvas;

  constructor(private platform: Platform) {
    this.platform.ready().then(() => {
      this.loadMap();
    });
  }

  loadMap() {
    this.map = GoogleMaps.create(this.mapCanvas.nativeElement);
    this.map.one(GoogleMapsEvent.MAP_READY)
      .then(() => { console.log("Map ready"); });
  }
}