0

我正在使用 Google Map API v3 来尝试填充地图，让人们宣传他们的工作可用性。地图输出良好并且填充良好，我正在使用动画下降功能使它们很好地落入。然而，它们都是一次性掉下来的，我想让它们一次掉一个，添加一个简单的延迟是解决方案，谷歌本身就是一个例子。唯一的区别是我有一个充满结果的数组。

我当前的代码

locations = [
    <?php foreach($searchResults as $clID => $r) { ?>
        ['<?php echo $r['clUserName']; ?>', <?php echo $r['clLat']; ?>, <?php echo $r['clLng']; ?>, '<?php echo '<div style="width: 100%"><div style="font-weight: bold; line-height: 25px;">' . $r['clUserName'] . '</div>Distance: ' . number_format($r['distance'], 0) . ' miles<br />Will Travel: ' . $r['clWorkRadius'] . ' miles<br />E-mail: <a style="color: #222 !important;;" href="mailto:' . $r['clEmail'] . '"><u>' . $r['clEmail'] . '</u></a><br />Tel: ' . $r['clTelephone'] . ($r['clMobile'] ? '<br />Mob: ' . $r['clMobile'] : '') . '</div>'; ?>'],

    <?php } ?>
    ];
    function initialize() {
        var mapOptions = {
            zoom: 10,
            center: new google.maps.LatLng(<?php if($_SESSION['search']['geo']['lat'] !== 0) { echo $_SESSION['search']['geo']['lat'] . ',' .$_SESSION['search']['geo']['lng']; } else { echo '51.507335,-0.127683'; } ?>),
            mapTypeId: google.maps.MapTypeId.ROADMAP
        }
        var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
        var infowindow = new google.maps.InfoWindow();
        var marker;
        for(i = 0; i < locations.length; i++) {
                marker = new google.maps.Marker({
                    position: new google.maps.LatLng(locations[i][1], locations[i][2]),
                    animation: google.maps.Animation.DROP,
                    map: map
                });

                google.maps.event.addListener(marker, 'click', (function(marker, i) {
                    return function() {
                        infowindow.setContent(locations[i][3]);
                        infowindow.open(map, marker);
                    }
                })(marker, i));
        }
    }
    function loadScript() {
        var script = document.createElement("script");
        script.type = "text/javascript";
        script.src = "http://maps.googleapis.com/maps/api/js?key=AIzaSyA6Bru5lLQukzGx3f-AVOBTPmxglkqI5m4&sensor=false&callback=initialize";
        document.body.appendChild(script);
    }
    window.onload = loadScript;

破坏的代码

为了错开地图上的人，我在标记周围添加了一个 setTimeout，将每个人的延迟时间稍长一些。但是，这样做会破坏代码。我不断收到 javascript 错误 TypeError: locations[i] is undefined。为什么简单地将代码包装在 setTimeout 中会阻止它查看位置？

        var marker;
        for(i = 0; i < locations.length; i++) {
            setTimeout(function() {
                marker = new google.maps.Marker({
                    position: new google.maps.LatLng(locations[i][1], locations[i][2]),
                    animation: google.maps.Animation.DROP,
                    map: map
                });

                google.maps.event.addListener(marker, 'click', (function(marker, i) {
                    return function() {
                        infowindow.setContent(locations[i][3]);
                        infowindow.open(map, marker);
                    }
                })(marker, i));
            }, 500);
        }
4

1 回答 1

1

您没有将要传递给的回调包装在setTimeout带有i变量的自评估函数中，因此在调用回调时i === locations.length（循环的终止情况）。

var marker;
for (i = 0; i < locations.length; i++) {
    setTimeout((function (i) {
        return function () {
            marker = new google.maps.Marker({
                position: new google.maps.LatLng(locations[i][1], locations[i][2]),
                animation: google.maps.Animation.DROP,
                map: map
            });

            google.maps.event.addListener(marker, 'click', (function (marker, i) {
                return function () {
                    infowindow.setContent(locations[i][3]);
                    infowindow.open(map, marker);
                }
            })(marker, i));
        };
    })(i), 500);
}
于 2013-01-21T14:58:59.697 回答