0

私は Google Map API v3 を使用して、仕事の空き状況を宣伝する人々をマップに入力しようとしています。マップは正常に出力され、正常に配置されます。アニメーション ドロップイン機能を使用して、それらを適切に配置しています。ただし、それらはすべて一度に落ちるので、一度に1つずつ落下させたいのですが、単純な遅延を追加することが解決策であり、Google自体が例としてそれを持っています. 唯一の違いは、結果でいっぱいの配列があることです。

私の現在のコード

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して自己評価関数に渡すコールバックをラップしなかったため、コールバックが呼び出されるまでに(ループの終了ケース)。ii === 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 に答える