角度谷歌地圖不顯示

我有角谷歌地圖工作它似乎，但地圖不顯示在我的網站上。我的JS加載地圖，我可以打印出地圖屬性。最重要的是，當我使用我的Chrome AngularJS調試器時，我可以看到地圖上的圖片居住在我的範圍內，但它並未顯示在我的頁面上。在Google的API頁面上，我可以看到正在提出請求。那麼，我做錯了什麼導致它沒有實際顯示這張地圖呢？該視圖正在通過ng-routes通過ng-view指令導入。角度谷歌地圖不顯示

謝謝你的幫助！

Image of developer pane

角：

uiGmapGoogleMapApiProvider.configure({ 
     key: 'MY_KEY', 
     v: '3.17', 
     libraries: 'weather,geometry,visualization' 
    }) 

tripApp.controller('TripsController', ['$scope', 'uiGmapGoogleMapApi', 
    function ($scope, uiGmapGoogleMapApi) { 

     uiGmapGoogleMapApi.then(function (maps) { 
      $scope.map = {center: {latitude: 39.8433, longitude: -105.1190}, zoom: 10}; 
     }) 
}])

相關HTML：

CSS

.angular-google-map-container { 
    height: 300px; 
} 
.angular-google-map { 
    height: 300px; 
}

編輯：包括我的CSS進口。看來我的項目中的CSS沒有正確加載。檢查元素顯示零高度。如果我點擊該元素，雖然它被導入，但它不顯示我的.css。我在小提琴上覆制了代碼並且它可以工作，但是如果我刪除了css部分，我會得到類似的行爲。如果我使用PyCharm在liveEdit中運行代碼，它會給我提供這個問題，但如果我在PyCharm中打開時修改.css文件，則會彈出地圖！刷新 - 它消失了。

在進行實時編輯之前，Chrome開發人員窗格中的.angular-google-map css樣式不存在，它列出了元素的所有樣式。然後我使用liveEdit修改.css文件，並且地圖顯示和樣式從viewtrips.css第7行變爲.angular-google-map。爲什麼它不在第一次加載時正確加載樣式？：

小提琴： https://jsfiddle.net/diesel555/z12k2djv/2/

來源

2015-07-22 Diesel

嘿柴油導航欄。我從來沒有使用過Angular谷歌地圖，但我已經使用了[Google Maps API]（https://developers.google.com/maps/）和Angular，並且從來沒有遇到任何問題。這是非常容易使用和開始。單獨使用Google Maps API可獲得更多資源和信息。如果你已經寫了很多代碼，那麼我希望有人幫助你解決你的問題！ –

注意：Google Maps API版本3.17已經停用。它不應該導致你任何問題，你會得到v3.19（最舊的可用版本）。請參閱https://developers.google.com/maps/documentation/javascript/basics#VersionDocs – duncan

我在代碼中看不到任何錯誤。我也在使用Angular Google Maps。嘗試爲.angular-google-map-container和包裝div設置背景顏色。不顯示任何東西嗎？ – BastianW

如果你的地圖沒有顯示 - 通過檢查元素來檢查它的高度在某個調試器中是否爲零。如果它爲零，那麼你的CSS很可能沒有被正確導入。

我的.css被後端重新路由到一個單獨的URL。通過修改後端解決，但通用的答案是沒有高度設置它默認爲零，所以最可能看到的問題是您的.css文件或導入。

來源

2015-07-22 15:33:08 Diesel

你可能想檢查你的css。其實很難讓它適合屏幕。這爲我工作：

我有過4EM高度和子導航欄與64PX高度

.map-wrapper { 
    position: relative; 
    height: calc(100vh - 4em - 64px); 
} 

.angular-google-map-container { 
    position: absolute; 
    top: 0; 
    bottom: 0; 
    right: 0; 
    left: 0; 
}

與HTML

<div class="map-wrapper"> 
    <ui-gmap-google-map> 
    ... 
    </ui-gmap-google-map> 
</div>

來源

2016-11-04 15:34:40 nebulr

角度谷歌地圖不顯示

回答

相關問題