Angular Google 映射奇怪的 forloop 问题

Question

我的 angular 控制器中的 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",
    }
];

以及带有回调参数的地理编码函数：

    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;

console.log("Array len : " + $rootScope.places.length);

说 4

console.log("var i : " + i);

也说4！

很明显：

console.log($rootScope.places[i]);

表示未定义

我不明白这种奇怪的行为。跟回调函数有关系吗？

感谢您的帮助

最大

编辑：

您好，感谢您的帮助。知道我了解 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

有线索吗？

感谢您宝贵的帮助。

编辑 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)
    });

相同的结果

Answer 1

实际上你的 for 循环工作正常。
您的 回调函数 也正常工作
问题出在他们的组合上..

对于第一次迭代 i=1 和 geocodeAddress(1) 被调用
对于第二次迭代 i=2 和 geocodeAddress(2) 被调用....等等
geocodeAddress(1) 需要一些时间来处理，直到 callback(1) 被调用时 i 的值达到 4..

事件链如下：

循环 i=1
地理编码地址(1)
循环 i=2
地理编码地址(2)
循环 i=3
地理编码地址(3)
循环 i=4
地理编码地址(4)
****我=4****
回调(1)
回调(2)
回调(3)
回调(4)

所有回调的 i 值为 4.

因此 i 的控制台日志总是给出 4

Angular Google 映射奇怪的 forloop 问题

Angular Google maps weird forloop issue

javascript

google-maps

for-loop

callback

angularjs