Angular谷歌地图奇怪的forloop问题
Angular Google maps weird forloop issue
我有一个奇怪的问题,在我的角控制器for循环:
我有一个这样定义的数组:
$rootScope.places = [
{
name : "Sleep",
address : "piazza navona",
kind : "sleep",
},
{
name : "Borghese",
address : "villa borghese",
kind : "nature",
},
{
name : "Trastevere",
address : "trastevere",
kind : "relax",
},
{
name : "Collosseo",
address : "collosseo",
kind: "cultural",
}
];
和一个带有回调参数的geocode函数:
var geocodeAddress = function(address, callback) {
var geocoder = new google.maps.Geocoder();
geocoder.geocode( { 'address': address}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
callback(results[0].geometry.location);
} else {
callback(-1);
console.log("Geocode was not successful for the following reason: " + status);
}
});
};
如果我尝试使用地理编码并为数组中的每个位置添加标记:
for (var i = 0; i < $rootScope.places.length; i ++) {
geocodeAddress($rootScope.places[i].address, function(latLng){
console.log("Array len : " + $rootScope.places.length);
console.log("var i : " + i);
console.log("Array : " + $rootScope.places);
console.log($rootScope.places[i].name + " at " + $rootScope.places[i].address + " geocoded");
console.log(latLng);
markers.push(designMarker($rootScope.places[i].kind, latLng));
});
}
$scope.markers = markers;
4说console.log("Array len: " + $rootScope.places.length);
console.log("var I: " + I);
也说4 !
显然:
console.log ($ rootScope.places[我]);
说未定义我不明白这种奇怪的行为。它与回调函数有关吗?
谢谢你的帮助
马克思EDIT:
你好,谢谢你的帮助。我知道for循环是怎么工作的。我试过了:
function synchronousLoop(i) {
if (i < $rootScope.places.length) {
geocodeAddress($rootScope.places[i].address, function(latLng){
markers.push(designMarker($rootScope.places[i].kind, latLng));
synchronousLoop(i+1);
});
}
}
synchronousLoop(0);
但是唯一显示的标记是我的第一个$rootScope.places
什么线索吗?
谢谢你宝贵的帮助。
EDIT 2:
我试着把我的标记推入回调函数:
function synchronousLoop(i, callback) {
if (i < $rootScope.places.length) {
geocodeAddress($rootScope.places[i].address, function(latLng){
markers.push(designMarker($rootScope.places[i].kind, latLng));
synchronousLoop(i+1);
});
}
callback && callback();
}
synchronousLoop(0, function() {
$scope.markers = markers;
console.log($scope.markers)
});
相同的结果
实际上你的for循环工作正常。你的回调函数工作正常
问题在于它们的组合。
对于第一次迭代i=1, geocodeAddress(1)被称为
对于第二次迭代i=2, geocodeAddress(2)称为....等等
geocodeAddress(1)需要一些时间来处理,直到回调(1)被调用时,i的值达到4.
事件链如下:
循环i = 1geocodeAddress (1)
循环我= 2
geocodeAddress (2)
循环我= 3
geocodeAddress (3)
循环i = 4
geocodeAddress (4)
我= 4 * * * * * * * *
回调(1)
回调(2)
回调(3)
回调(4)
所有回调函数的I值都是4
因此i的控制台日志总是给出4
- 在指令控制器中使用$attrs时出现问题
- 将PHP变量传递给jQuery时遇到问题
- Canvas Html5绘图应用程序,移动画布会导致重大问题
- 参数变量出现ngTable指令问题
- 剑道网格jQuery动画()问题
- 我的jQuery插件参数没有正确启动,遇到了问题
- Phonegap-(安卓/iphone)多个图像的图像库出现问题
- TableExport jquery插件:文件名和扩展名问题
- JavaScript Pub/Sub属性访问问题
- JavaScript异步问题
- 如何解决Yii中的页面刷新问题
- Safari(Mac OS)上的jQuery平滑滚动问题
- jqGrid树网格问题
- 使用正则表达式评估电子邮件地址时出现性能问题
- 如何消除代码中的未定义和其他问题
- JavaScript代码问题:我正在将对象转换为数组
- 三星智能电视应用程序;Brightcove示例应用程序远程控制问题
- 由于iframe导致的问题
- 在forloop中使用append()时出现问题
- Angular谷歌地图奇怪的forloop问题