javascript - 带有超时的 map 加载上的谷歌标记动画

Question

我想在每个谷歌标记的 DROP 动画上创建一个超时，但我认为标记的关闭代码和数组项是冲突的。我对闭包知之甚少，在这个问题上有点卡住了。

我可以让他们一下子掉下来。

falling markers code jsfiddle

但我希望在每个 100 毫秒的标记之后都有一个超时。

这是我认为可行的

...

//Loop through nc array
for (var i = 0; i < nc.length; i++) {

   //Create 100 ms rule on marker creation
   setTimeout(function () {

     //Create marker
     var marker = new google.maps.Marker({
       position: nc[i],
       map: map,
       title: "tron" + i,
       animation: google.maps.Animation.DROP,
     });

    }, i * 100);

   //Creating the closure
   (function (i, marker) {

     //Add infowindow
     google.maps.event.addListener(marker, 'click', function () {
         if (!infowindow) {
            infowindow = new google.maps.InfoWindow();
         }
         //Setting content of info window
         infowindow.setContent('<h2>Tron lives | ' + i + '</h2>');
             infowindow.open(map, marker);
         });
      })(i, marker);
    };

...

但这行不通。我认为一旦在循环中创建了标记，就会在该创建过程中设置超时，这会产生下雨标记效果。

Answer 1

与@Bryan Weaver 的想法相同。拿起你的 fiddle 并对其进行一些修改以在函数中创建标记，然后迭代设置超时。以下面的内容结束，它成功地实现了你的“下雨”效果。

    var addmarker = function(i) {
        //Create marker
            var marker = new google.maps.Marker({
                position: nc[i],
                map: map,
                title: "tron" + i,
                animation: google.maps.Animation.DROP,
            });

            //Creating the closure
            (function (i, marker) {   

                //Add infowindow
                google.maps.event.addListener(marker, 'click', function () {
                    if (!infowindow) {
                        infowindow = new google.maps.InfoWindow();
                    }
                    //Setting content of info window
                    infowindow.setContent('<h2>Tron lives | ' + i + '</h2>');

                    infowindow.open(map, marker);
                });
            })(i, marker); 
        if(i++ < nc.length) {
            setTimeout(function() {addmarker(i)}, 100);
        }

    }
    addmarker(0);             

这是完整的 fiddle :http://jsfiddle.net/LzJ8B/