2

私は現在、Google Maps API v3、jQuery、およびMarkerClustererを使用しています。

「長さ」の結果に奇妙な問題があることに気づきました。だから、私はあなたに私のコメントされたコードを見せます：

ファイルdata.jsonには、約1800個のオブジェクトが含まれています。

function initialize() {

 $('#map_canvas').gmap({'zoom': 6, 'center': (new google.maps.LatLng(46.679594, 2.109375)), 'mapTypeId': google.maps.MapTypeId.ROADMAP, 'disableDefaultUI':true}).bind('init', function(evt, map) { 


    var mstime = new Date().getTime(); // to avoid caching

    var markerslist = new Array(); // This array will gets points informations

    $.getJSON('data.json?'+mstime, function(data) {

        for (var i = 0; i < data.markers.length; i++) {
            var val = data.markers[i];

            var t =  new Object();
            t.lat =  val.lat; 
            t.lng =  val.lng;
            t.name = val.label;
            markerslist.push(t); // pushing point info in markerslist
        }

    });

    alert(markerslist.length); // This first alert returns "0" !
    alert(markerslist.length); // This new return the right count (about 1800). Weird!


    for( var i = 0; i < markerslist.length; i++ ) { // To create markers on map
        $('#map_canvas').gmap('addMarker', { 
            'position': new google.maps.LatLng(markerslist[i].lat, markerslist[i].lng) 
        }).click(function() {
            $('#map_canvas').gmap('openInfoWindow', { content : 'Hello world!' }, this);
        });
    }



    $('#map_canvas').gmap('set', 'MarkerClusterer', new MarkerClusterer(map, $(this).gmap('get', 'markers')));

 });


}

要約すると、このコードは少なくとも1つのアラートで完全に機能します... 2つのアラートを削除すると、このコードは機能しません。

よろしくお願いします

4

1 に答える 1

4

getJSON呼び出しは非同期です。その結果、コールバックが呼び出される前に、呼び出しの後に実行の流れが進行します。への呼び出しの後に配置するのではなく、コールバック関数への呼び出しの結果に依存するコードを追加する必要がありますgetJSON。

注: コード サンプルでは、​​コードをコピーして移動しました。すべてのコードをコールバックに含める必要があることがわかったので、それを最適化して一時配列の必要性をなくすことができると確信しています。

$.getJSON('data.json?'+mstime, function(data) {

    for (var i = 0; i < data.markers.length; i++) {
        var val = data.markers[i];

        var t =  new Object();
        t.lat =  val.lat; 
        t.lng =  val.lng;
        t.name = val.label;
        markerslist.push(t); // pushing point info in markerslist
    }

    alert(markerslist.length); // it will be correct here

    // now do the rest

    for( var i = 0; i < markerslist.length; i++ ) { // To create markers on map
        $('#map_canvas').gmap('addMarker', { 
           'position': new google.maps.LatLng(markerslist[i].lat, markerslist[i].lng) 
        }).click(function() {
           $('#map_canvas').gmap('openInfoWindow', { content : 'Hello world!' }, this);
        });
    }

    $('#map_canvas').gmap('set', 'MarkerClusterer', new MarkerClusterer(map, $(this).gmap('get', 'markers')));
}); // and finally close the callback
于 2012-05-06T14:45:05.420 に答える