Question

我遇到了为Ionic Framework软件实现angular-google-maps插件（https://angular-ui.github.io/angular-google-maps/#!/）的一些问题，因为我根本无法渲染地图。疯狂的是，GoogleMapAPI承诺正在被触发（根据我在其中放置用于测试目的的警报），但没有地图呈现在屏幕上。

我的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"

我已经仔细检查过这些文件都出现在我在脚本src属性中列出的位置，所以没有问题。

Google地图插件正在我的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'
  });
}])

在我希望加载Google地图的控制器中，我有以下设置：

.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;
}

但我看不到地图的渲染只有一个固定在上面高度的空白区域。

任何人都可以就可能或可能导致不提供地图的内容提出任何建议/提醒，以及我可以采取哪些措施来纠正这个问题？

我提前感谢民众可以提供的任何帮助......如果代码格式有点不对劲，我很抱歉！： - /

Answer 1

检查你的CSS课程

.angular-google-maps-container

应该是

.angular-google-map-container。

我相信你有地图而不是地图。

Answer 2

首先感谢Brad对我的问题的回答（对于我最近使用这个软件包的尝试，CSS类名称WAS非常有用！）。

我最初在2014年11月通过编写我自己的自定义指令解决了这个问题，该指令提供了我需要的Google Map功能。

从那时起，我有机会使用最新版本的AngularJS Google Maps套餐（angular-google-maps 2.0.12 2015-01-29），并且已经毫无问题地实现了这一点（注意Brad＆＃39;关于班级名称的提示）。

再次感谢。

角度Google地图无法在离子视图中渲染

2 个答案: