数组上的Javascript长度结果不同

时间:2012-05-06 14:42:39

标签: javascript jquery google-maps-api-3 markerclusterer

我目前正在使用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')));

 });


}

总而言之,此代码与至少一个警报完美配合... 如果删除了两个Alert,则此代码不起作用。

感谢您的帮助, 此致

1 个答案:

答案 0 :(得分: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