我正在加载Google地图,当我导航到/ map时,会加载标记以填充地图。问题是javascript的其余部分在加载标记之前运行并执行。我认为可以解决的问题是在工厂中返回检索地图数据的承诺。但这并没有起作用。
有人可以就我做错了什么提出建议吗?
在控制台中我看到了:
angular.js:13920 TypeError: Cannot read property 'lat' of undefined
at Object.link (http://localhost/logintest/js/app.js:586:55)
第586行引用此行(在指令中):
center: new google.maps.LatLng(lastElement.lat, lastElement.lon),
我这样得到lastElement
:
var lastElement = scope.arrLocations[scope.arrLocations.length - 1];
厂:
app.factory('map', ['$q', function($q){
var map={};
var mapInfoItems=[];
map.getMapInfo = function() {
var deferred = $q.defer();
var mapitems = firebase.database().ref('mapinfo/'+firebase.auth().currentUser.uid);
mapitems.on('child_added', function(snapshot){
mapInfoItems.push(snapshot.val());
deferred.resolve(mapInfoItems);
});
return deferred.promise;
};
return map;
}]);
控制器:
app.controller('mapController', ['$scope', 'map', function($scope, map){
$scope.myLocations = {};
$scope.arrLocations = [];
$scope.mapLocations = map.getMapInfo();
for(var i=0; i<$scope.mapLocations.length; i++){
$scope.myLocations.title = $scope.mapLocations[i].name;
$scope.myLocations.content = $scope.mapLocations[i].message;
$scope.myLocations.lat = $scope.mapLocations[i].lat;
$scope.myLocations.lon = $scope.mapLocations[i].lon;
$scope.arrLocations.push($scope.myLocations);
}
}]);
HTML:
<div ng-controller="mapController">
<my-map get-map-fn="getMap()"></my-map>
</div>
答案 0 :(得分:1)
map.getMapInfo()
会返回一个promise,但您将其视为在控制器中返回一个数组
此外,您将继续覆盖for
循环中同一对象的属性,并将相同的对象引用推送到数组中。这意味着数组中的所有元素都将以循环中设置的最后一个值结束...因为它们都是对一个对象的引用
替换
$scope.mapLocations = map.getMapInfo();
使用
map.getMapInfo().then(function(locations){
for(var i=0; i<locations.length; i++){
// create new object each iteration
var obj ={
title : locations[i].name,
content: locations[i].message,
// ... etc
}
$scope.arrLocations.push(obj);
}
});