谷歌地图没有显示离子2本机谷歌地图插件cordova android 7答案

【问题标题】：Google Map not showing with Ionic 2 native google-maps plugin cordova android 7谷歌地图没有显示离子2本机谷歌地图插件cordova android 7
【发布时间】：2018-04-05 09:43:12
【问题描述】：

https://github.com/mapsplugin/cordova-plugin-googlemaps

按照所有说明仍然没有加载地图。

在这里查看解决方案。

应用了所有的解决方案仍然无法正常工作。

https://github.com/mapsplugin/cordova-plugin-googlemaps-doc/blob/master/v1.4.0/TroubleShooting/Blank-Map/README.md

HTML：

<div id="map_canvas"></div>

CSS：

page-home {
    #map_canvas {
        height: 100%;
        width: 100%;
    }
}

ts：

    import { NavController, Platform } from 'ionic-angular';
    import { GoogleMaps, GoogleMap, GoogleMapsEvent, GoogleMapOptions, CameraPosition, MarkerOptions, Marker } from '@ionic-native/google-maps';
    import { Component } from "@angular/core";
    @Component({
      selector: 'page-home',
      templateUrl: 'home.html'
    })
    export class HomePage {
      map: GoogleMap;
      constructor(private gm: GoogleMaps, private platform: Platform) { }
      ionViewDidLoad() {
        this.platform.ready().then(() => {
          // this.loadMap();
          setTimeout(this.loadMap.bind(this), 1000);
        });
      }
      getMyLocation() {
        this.map.getMyLocation().then(location => {
          alert('success!');
          alert(JSON.stringify(location));
        }).catch(err => {
          alert('failure!');
          alert(JSON.stringify(location));
        });
      }

  loadMap() {

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

    this.map = GoogleMaps.create('map_canvas', mapOptions);
    this.map.one(GoogleMapsEvent.MAP_READY)
      .then(() => {
        alert('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');
              });
          });

      });
  }
}

输出：

【问题讨论】：

标签： google-maps ionic3 cordova-plugins

【解决方案1】：

也许您必须在视图加载之前启用 GPS，或者为了避免科尔多瓦问题，您可以实现 js 谷歌地图

【讨论】：

【解决方案2】：

左下角有一个谷歌标志，但地图是空的。这意味着您的 API 密钥未经授权。

设备似乎处于离线状态。您必须通过互联网至少授权一次。

Google Maps Android API v2 和 Google Maps SDK for iOS 在生成 API 密钥之前启用。因为 Google 保留了哪些 API 密钥允许在生成时启用哪些 API 的信息。

所以，我的建议是： 1.打开设备网络 2.如果不行，重新生成api密钥，然后重新安装插件。

【讨论】：

我在 bluestacks app player 和 vivo 手机上运行它。我按照你提到的步骤。仍然无法正常工作。我也连接到网络。我的设备在线。我已经重新生成了两次 api 密钥并在重新生成之前启用了 maps api。我还有什么需要配置的吗？