Question

我正在使用Angular Google Maps，并且已经按照配置以及网站上给出的步骤进行了操作。我没有得到任何错误，也没有地图加载指令。代码如下： -

控制器

app.controller('MapCtrl', [
    '$scope',
    'uiGmapGoogleMapApi',
    function($scope, uiGmapGoogleMapApi) {
        //Variables Decleration
        $scope.odorizerID = "";
        $scope.map = {
            center: {
                latitude: 45,
                longitude: -73
            },
            zoom: 8
        };
        //Function Decleration
        $scope.onMapClick = function(odorizerID) {

        }

        uiGmapGoogleMapApi.then(function(maps) {

        });

    }
]);

app.js

app.config([
    '$stateProvider',
    '$urlRouterProvider',
    'uiGmapGoogleMapApiProvider',
    function($stateProvider, $urlRouterProvider, uiGmapGoogleMapApiProvider) {

        /**
         * Configuring the Google Map API.
         */
        uiGmapGoogleMapApiProvider.configure({
            //    key: 'your api key',
            v: '3.17',
            libraries: 'weather,geometry,visualization'
        });



        /*For any unmatched url, redirect to / */
        $urlRouterProvider.otherwise("/");
        /*For all the other states we would configure the $StateProvider*/
        $stateProvider
            .state('login', {
                url: "/",
                templateUrl: "/app/views/auth/login.html",
                controller: 'AuthCtrl'
            })
            .state('maps', {
                url: "/maps",
                templateUrl: "/app/views/maps/maps.html"
            })
            .state('performance', {
                url: "/performance/:ororizerID",
                templateUrl: "/app/views/details/performance.html",
                controller: "PerformanceCtrl"
            })
            .state('usage', {
                url: "/usage/:ororizerID",
                templateUrl: "/app/views/details/usage.html"
            });
    }
]);

maps.html

<ui-gmap-google-map center='map.center' zoom='map.zoom'></ui-gmap-google-map>

index.html

这包含在index.html

中

<script src="bower_components/angular-google-maps/dist/angular-google-maps.js"></script>

请帮我解决同样的问题。地图根本不加载。

我在视图中获得的输出是

<ui-gmap-google-map center="map.center" zoom="map.zoom" class="ng-scope ng-isolate-scope"><div class="angular-google-map"><div class="angular-google-map-container"></div><div ng-transclude="" style="display: none"></div></div></ui-gmap-google-map>

的style.css

<style type="text/css">
  .angular-google-map-container { height: 400px; width:800px;}
</style>

Answer 1

您在$stateProvider上错过了控制器声明。

.state('maps', {
    url: "/maps",
    templateUrl: "/app/views/maps/maps.html"
})

- ＆GT;

.state('maps', {
    url: "/maps",
    templateUrl: "/app/views/maps/maps.html",
    controller: "MapCtrl"
})

Angular Google Maps不会出现在我的模板视图中？

1 个答案: