Question

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

我知道空白地图可能因不正确的api密钥而发生，但我已经进行了三次检查，并且我安装了cordova原生谷歌地图插件的密钥是正确的。我尝试过新密钥，删除并重新安装插件，两种方法结合起来，所有情况下都存在同样的问题。

我的实现几乎逐字逐句地从教程/离子文档中解除，因此无法看到那里存在问题：

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

    }

}

任何帮助表示感谢;这让我疯了。

Answer 1

Google地图的Api密钥具有网址限制。

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

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

1.登录Google云支持门户网站。

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

根据请求的来源检查网址，可以是http://localhost:8080

等开发网址

Answer 2

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

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

在Ionic2中使用原生Google地图的空白地图 - 更正密钥

2 个答案: