Angular谷歌地图奇怪的forloop问题

Angular Google maps weird forloop issue

本文关键字:forloop 问题 谷歌地图 Angular      更新时间:2023-09-26

我有一个奇怪的问题,在我的角控制器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;

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

4说

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