在Angular控制器中获取对NgMap的引用

时间:2016-07-16 04:52:36

标签: angularjs ng-map

从ngMap https://github.com/allenhwkim/angularjs-google-maps获取的语法很好用:

    angular
    .module('trails')
    .controller('MyController', function (NgMap) {
        NgMap.getMap().then(function (map) {
            console.log(map.getCenter());
            console.log('markers', map.markers);
            console.log('shapes', map.shapes);
        });
    });

但是我用于声明控制器的语法是不同的,我得到错误:

  

angular.js:13642 TypeError:无法读取属性' getMap'未定义的

它在下面的行中失败了:

  

NgMap.getMap()。then(function(map){

控制器声明为:

    angular
    .module('trails')
    .controller('ActivityDetailsController', [
        '$mdSidenav', '$mdBottomSheet', '$timeout', '$log', '$http', '$location', '$routeParams',
        ActivityDetailsController
    ]);
function ActivityDetailsController($mdSidenav, $mdBottomSheet, $timeout, $log, $http, $location, $routeParams, NgMap) {
    var self = this;

    $http.get('/activity/detailStats/' + $routeParams.id, {
        params: { max: "1000" }
    })
        .success(function (data) {
            self.stats = data.stats;

            // Zoom to fit
            var bounds = new google.maps.LatLngBounds();
            for (var i = 0; i < self.stats.activityTrackPoints.length; i++) {
                var latlng = new google.maps.LatLng(self.stats.activityTrackPoints[i][0], self.stats.activityTrackPoints[i][1]);
                bounds.extend(latlng);
            }
            NgMap.getMap().then(function (map) {
                map.setCenter(bounds.getCenter());
                map.fitBounds(bounds);
            });

        })
        .error(function (data, status) {
            console.error('https error', status, data);
        })
        .finally(function () {
        });

我尝试在其他明显的地方添加NgMap,例如:

...'$routeParams', NgMap,
        ActivityDetailsController...

或者在控制器声明等之前执行一个ActivityDetailsController。$ inject = NgMap但是它给出了类似的错误,因为NgMap无法被引用。

编辑:ngMap依赖项已设置在另一个类似于答案的文件中。对不起,我之前没有说过,但上面的代码有效并且不起作用,所以我认为原来可以把它放在一边。

var app = angular
.module('trails', ['ngMaterial', 'md.data.table', 'ngRoute', 'ngMap'])

我不确定这是否与我错误地尝试使用此控制器声明或NgMap中的某些东西注入NgMap的方式有关...或者很可能是我对这两种框架都缺乏经验!

2 个答案:

答案 0 :(得分:1)

您忘记添加ngMap依赖项。

以这种方式声明你的模块:

angular.module('trails', ['ngMap'])

它应该有用。

答案 1 :(得分:1)

var app= angular.module('trails', ['ngMap']);
  app.controller('MyController', function($scope, $interval, NgMap) {
    var vm = this;
    NgMap.getMap().then(function(map) {
      vm.map = map;
    });
});