在Ionic2中使用原生Google地圖的空白地圖 - 正確密鑰

我是Ionic的全新品牌，剛剛開始使用它，我的第一個項目。我正試圖讓谷歌地圖顯示在網頁上，現在我幾乎已經有了。這只是the map displays blank like so. api也是definitely enabled on the google api console，所以它不可能是這樣。然而，很明顯，我的應用程序沒有生成任何請求，這很奇怪，因爲地圖控件存在這一事實意味着我必須到達地圖服務，好嗎？在Ionic2中使用原生Google地圖的空白地圖 - 正確密鑰

我知道空白地圖可能會發生，作爲一個不正確的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!'); 
     }); 

    } 

}

任何幫助表示讚賞;這讓我瘋狂。

來源

2017-02-13 Richard Gibson

您的API密鑰是特定於您正在訪問的域的？ – Coder

沒有，根本沒有域名，平臺或任何其他限制。 –

通常一些API密鑰是特定於域的，一些API密鑰可以添加任何所需的域。但Google API對訪問域會有限制。 – Coder

事實證明，即使我通過SDK管理器，我有谷歌播放安裝服務保證，以及因爲使用模擬器的x86映像是Google Api v3的需求（或者我讀過），所以仿真器不能與Play服務一起使用。

這是v3 Google API所必需的。在真正的android 7設備上運行完美。

來源

2017-02-14 13:10:45

谷歌地圖的API鍵具有URL限制。

爲了防止第三方使用自己的網站客戶端ID，使用客戶端ID的限制爲網址您特別授權的列表。

要查看您已授權的URL或授權其他網址：

1.登錄到谷歌雲支持門戶。

2.在左側菜單中，單擊地圖：管理客戶端ID。檢查基礎上，請求的來源

網址，並且可以開發的URL如http://localhost:8080

來源

2017-02-14 00:00:17 n00b

感謝您的建議，但我從來沒有見過或設置在雲支持的帳戶門戶網站，並沒有對我產生的任何憑據，所以不知道我怎麼會訪問 –

在Ionic2中使用原生Google地圖的空白地圖 - 正確密鑰

回答

相關問題