Angular Google Map無法在Ionic視圖中呈現

我在執行Ionic Framework軟件的angular-google-maps插件（https://angular-ui.github.io/angular-google-maps/#!/）時遇到了一些問題，因爲我根本無法獲取地圖。瘋狂的事情是GoogleMapAPI承諾正在觸發（根據我爲了測試的目的而發佈的提醒），但沒有地圖呈現給屏幕。Angular Google Map無法在Ionic視圖中呈現

我的index.html文件（在我的iOS目錄）使用以下文件調用：

_assets/_js/_plugins/lodash-2.4.1.min.js" 
lib/ionic/js/ionic.bundle.js" 
lib/ngCordova/ng-cordova.min.js" 
cordova.js" 
_assets/_js/_plugins/angular-google-maps-2.0.7.min.js" 
_assets/_js/app.js" 
_assets/_js/_custom/factories.js" 
_assets/_js/_custom/controllers.js"

我有雙重檢查這些文件都存在於我在SCRIPT SRC列出的位置屬性，以便那裏沒有問題。

的谷歌地圖插件加載/我controller.js內初始化通過以下文件：

angular.module('sampleAppNameHere.controllers', ["google-maps".ns()]) 


.config(['GoogleMapApiProvider'.ns(), function (GoogleMapApi) { 
    GoogleMapApi.configure({ 
    key: 'MY-KEY-HERE', 
     v: '3.17', 
     libraries: 'weather,geometry,visualization' 
    }); 
}])

在我要加載的谷歌地圖，從我有下面的一組控制器再往下-up：

.controller('LocationController', ['$scope', '$http', '$stateParams', '$sce', '$ionicLoading', '$ionicPopup', '$timeout', 'Logger'.ns(), 'GoogleMapApi'.ns(), 'RetrieveAppContent', function($scope, $http, $stateParams, $sce, $ionicLoading, $ionicPopup, $timeout, $log, GoogleMapApi, RetrieveAppContent) 
{ 

    function parseLocations(locationID, locationName, regionName) 
    { 
       // Retrieve factory function to return AJAX loaded data 
     RetrieveAppContent.retrieveRemoteContentForApp().then(function(locationObj) 
     { 
         // Loop through associative array formed from parsed AJAX data into factory method 
      angular.forEach(locationObj.locations, function(v, k) 
        { 
        if(locationID === v.recordID) 
        { 
           // Other content in here bonded to scope 
        $scope.mapLongitude  =  v.mapLongitude; 
         $scope.mapLatitude   = v.mapLatitude; 
         $scope.mapZoom    = v.mapZoom; 


       } 
      }); 


     GoogleMapApi.then(function(maps) 
     { 
         // Alerts placed in here are triggered when the template loads 
      maps.visualRefresh = true; 
      $scope.map    = { center: {latitude: $scope.mapLatitude, longitude: $scope.mapLongitude }, zoom: $scope.mapZoom }; 
       $scope.options  =  { scrollwheel: false }; 
      }); 

     }); 
    } 

}

的parseLocations功能在上面的控制器稱爲不久之後和內容都加載到模板完全按照預期所以沒有問題，但角地圖將不會呈現。

以下段是從其中用於控制器的內容被加載/顯示，並且其中所述地圖位於視圖：

<ion-view title="{{ locationName }}"> 
    <ion-content class="location-panel" ng-controller="LocationController"> 

     <!-- Render Google Map --> 
     <div id="map-canvas"> 
      <ui-gmap-google-map center="map.center" zoom="map.zoom"></ui-gmap-google-map> 
     </div>

我已經設置了CSS內下面的類，該應用程序使用：

.map-canvas, 
.angular-google-maps-container { 
    height: 400px; 
}

但我看到沒有渲染的地圖只有一個白色空間固定在上面的高度。

任何人都可以提供任何建議/提醒什麼可能會或可能導致地圖的非呈現以及我可能採取哪些措施來糾正此問題？

我在此先感謝民間人士可能提供的任何幫助.....以及我的道歉，如果代碼格式有點怪異！： -/

來源

2014-11-06 EinZweiDrei

檢查你的CSS類

.angular-google-maps-container

應該

.angular-google-map-container。

我相信你有它作爲地圖不映射。

來源

2014-11-06 20:25:03

嗨布拉德，道歉的極端延遲迴復你的答案。通過升級到最新版本的角度Google地圖軟件包，設法解決了地圖無法工作的情況。感謝在地圖CSS類的頭 - 非常讚賞。 – EinZweiDrei 2015-02-01 21:16:13

首先感謝Brad對我的問題的回答（對於我最近嘗試使用這個包的CSS類名WAS有用！）。

我最初通過編寫自己的自定義指令解決了這個問題，該指令提供了我需要的Google Map功能。

從那時起，我有機會使用最新版本的AngularJS Google Maps軟件包（angular-google-maps 2.0.12 2015-01-29），並且已經實現了這個沒有問題（注意到Brad在類中的提示名稱）。

再次感謝。

來源

2015-02-01 21:20:05 EinZweiDrei

Angular Google Map無法在Ionic視圖中呈現

回答

相關問題