在 Ionic2 中使用本机 Google 地图的空白地图 - 正确的键答案

【问题标题】：Blank map using Native Google Maps in Ionic2 - Correct keys在 Ionic2 中使用本机 Google 地图的空白地图 - 正确的键
【发布时间】：2017-07-02 00:37:18
【问题描述】：

我是 Ionic 的新手，刚开始我的第一个项目。我现在正试图让谷歌地图显示在一个页面上，我几乎已经有了。只是the map displays blank like so. api 也是definitely enabled on the google api console，所以不能这样。但是很明显我的应用程序没有生成任何请求，这很奇怪，因为存在地图控件这一事实意味着我必须到达地图服务好吗？

我知道错误的 api 密钥可能会导致空白地图，但我已经三重检查，并且我安装科尔多瓦本机谷歌地图插件的密钥是正确的。我尝试了新密钥，删除并重新安装插件，两种方法结合使用，相同的问题在所有情况下都存在。

我的实现几乎是从教程/离子文档中逐字提取的，所以看不出那里有问题：

import { Component, ViewChild, ElementRef } from '@angular/core';
import { NavController, NavParams, Platform } from 'ionic-angular';
import {
 GoogleMap,
 GoogleMapsEvent,
 GoogleMapsLatLng,
 CameraPosition,
 GoogleMapsMarkerOptions,
 GoogleMapsMarker
} from 'ionic-native';

@Component({
  selector: 'page-profile',
  templateUrl: 'profile.html'
})
export class ProfilePage {
  @ViewChild('map') mapElement: ElementRef;
  map: any;
  infowindow: any;


  constructor(public navCtrl: NavController, public navParams: NavParams, public platform: Platform) {
    platform.ready().then(() => {
            this.loadMap();
        });
  }

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

  ionViewDidLoad() {
    console.log('ionViewDidLoad ProfilePage');
  }

  loadMap(){

        let location = new GoogleMapsLatLng(-34.9290,138.6010);

        this.map = new GoogleMap('map', {
          'backgroundColor': 'white',
          'controls': {
            'compass': true,
            'myLocationButton': true,
            'indoorPicker': true,
            'zoom': true
          },
          'gestures': {
            'scroll': true,
            'tilt': true,
            'rotate': true,
            'zoom': true
          },
          'camera': {
            'latLng': location,
            'tilt': 30,
            'zoom': 15,
            'bearing': 50
          }
        });

        this.map.on(GoogleMapsEvent.MAP_READY).subscribe(() => {
            console.log('Map is ready!');
        });

    }

}

任何帮助表示赞赏；这让我发疯了。

【问题讨论】：

您的 API 密钥是否特定于您正在访问的域？
不，没有域、平台或任何其他限制。
通常一些 API 密钥是特定于域的，而一些 API 密钥可以添加任何所需的域。但是 Google API 的访问域会有限制。
@Coder 我看不出有任何域限制，并不是说我真的知道如何检查。但这是一个已经完成了数千次的微不足道的功能，如果 Google 地图 API 有域限制，肯定会有很多人遇到同样的问题。
日志/控制台中的任何内容？看起来你对 URL 有错误的假设

标签： cordova google-maps ionic-framework ionic2 cordova-plugins

【解决方案1】：

谷歌地图的 API 键有 URL 限制。

防止第三方自行使用您的客户端 ID 网站，您的客户端 ID 的使用仅限于 URL 列表您特别授权的。

查看您已授权的 URL 或授权其他网址：

1.登录谷歌云支持门户。

2.在左侧菜单中，点击地图：管理客户 ID。

根据请求的 Origin 检查 URL，可以是开发 URL，例如 http://localhost:8080

【讨论】：

感谢您的建议，但我从未在云支持门户上看到或设置过帐户，也没有为我生成任何凭据，所以不知道我将如何访问它

【解决方案2】：

事实证明，即使我通过 SDK 管理器确保我安装了 Google Play 服务，并且为模拟器使用了 x86 映像，因为这是 Google Api v3 的要求（或者我读到了），模拟器不适用于 Play 服务。

这是 v3 Google API 所必需的。在真正的 android 7 设备上运行完美。

【讨论】：