在子組件中使用SebM的google地圖模塊顯示空白地圖

編輯：我發現了這個問題。我在使用ng2-boostrap製表符模塊時，在此視圖內添加地圖時，地圖不呈現。我不能解決問題，但。在子組件中使用SebM的google地圖模塊顯示空白地圖

我正在處理角度2應用程序，我需要將谷歌地圖模塊導入到子模塊中。我的問題是 - 我該如何正確地做到這一點？這是甚至可能的，因爲它是。

我已經試過：

我已經加入了import { AgmCoreModule } from 'angular2-google-maps/core';和AgmCoreModule.forRoot({ apiKey: 'xxx', libraries: ['places'] })其中xxx是我的apiKey從谷歌API的網站上下載。如果我在一個新的angular-cli創建的應用程序中運行此代碼 - 將模塊加載到app.module中，一切正常。選擇代碼如下：

<sebm-google-map [latitude]="lat" [longitude]="lng"> 
      <sebm-google-map-marker [latitude]="latitude" [longitude]="longitude"> 
      </sebm-google-map-marker> 
    </sebm-google-map>

不過，我想用它在一個模塊調用MapModule和導入模塊到我app.module，於是我進口AgmCoreModule到MapModule，無forRoot（），並選擇在html中被識別並且地圖被加載，但地圖顯示一個空視圖 - 即有一個帶有谷歌徽標和東西的地圖，但沒有內容 - 沒有錯誤消息。我使用與我的測試示例完全相同的代碼。

我也嘗試用forRoot（{apiKey：'xxx'}）添加AgmCoreModule，結果相同。我從App.module中刪除了導入，並且只導入了具有相同結果的MapModule。

我在這裏錯過了什麼嗎？如果需要，我可以提供更多的代碼，但我認爲我的問題在於缺乏進口知識。

親切的問候克里斯

來源

2017-02-06 ChrisEenberg

你有沒有試過把你的組件的代碼，負責查看地圖？

import {MapsAPILoader, SebmGoogleMap} from 'angular2-google-maps/core'; 
    @ViewChild(SebmGoogleMap) map: SebmGoogleMap; 

    this.map.triggerResize();

如果地圖不在初始視圖中呈現，例如，在一個* ngif塊內，就會出現問題。當您檢查標籤中的元素時，您是否會看到地圖代碼，或只有在地圖選項卡被激活時纔會看到地圖代碼？

通常，當沒有錯誤時，triggerResize（）將解決您的問題。

來源

2017-02-07 06:08:40

我添加了您寫入按鈕的代碼，並在視圖完全加載後按下它，並且它可以工作！現在我將它添加到最後一個生命週期鉤子，看看是否讓它「自動」非常感謝你！ – ChrisEenberg

由於我們必須升級Angular 5更新，因此我使用新的@ agm/core包來解決這個問題 –

在子組件中使用SebM的google地圖模塊顯示空白地圖

回答

相關問題