在 Angular 控制器中获取对 NgMap 的引用
Getting a reference to NgMap inside Angular controller
这个语法取自 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: Cannot read property 'getMap' of undefined
它失败了,如下所示:
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 的方式有关...或者很可能是我对这两个框架缺乏经验!
您忘记添加 ngMap
依赖项。
以这种方式声明您的模块:
angular.module('trails', ['ngMap'])
它应该可以工作。
var app= angular.module('trails', ['ngMap']);
app.controller('MyController', function($scope, $interval, NgMap) {
var vm = this;
NgMap.getMap().then(function(map) {
vm.map = 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: Cannot read property 'getMap' of undefined
它失败了,如下所示:
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 的方式有关...或者很可能是我对这两个框架缺乏经验!
您忘记添加 ngMap
依赖项。
以这种方式声明您的模块:
angular.module('trails', ['ngMap'])
它应该可以工作。
var app= angular.module('trails', ['ngMap']);
app.controller('MyController', function($scope, $interval, NgMap) {
var vm = this;
NgMap.getMap().then(function(map) {
vm.map = map;
});
});