Javascript只显示最后的标记

Question

以下代码从/home.json URL获取一些JSON数据，其中6个用户包含5个微博。但是，只显示最后4个标记（甚至不是第5个!!）。我花了2天的时间来发现错误，但不幸的是，我无法真正理解为什么这种方式不起作用。如果有人能帮助我，我会非常感激！

我已经通过警报测试了所有的lon/lat变量！他们都有适当的数据。地图应该是好的，因为最后4个显示！最有可能的问题在于我的闭包定义，但我真的不明白我在做什么错..

var GMAPS = window.GMAPS || {}; 
GMAPS.mainMap = function() { 
    var map; 
    var infowindow = new google.maps.InfoWindow(); 
    var jsonObject = {}; 

    function addMarkers() { 
    var xhr = new XMLHttpRequest(); 
    xhr.open("GET", "/home.json", true); 
    xhr.onreadystatechange = function() { 
     if (xhr.readyState == 4 && xhr.status == 200) { 
     jsonObject = JSON.parse(xhr.responseText); 
     for (var i=0; i<jsonObject.length; i++) { 
      for (var j=0; j<jsonObject[i].microposts.length; j++) { 
      (function(Name, Title, Content, Latitude, Longitude) { 
       return function() { 
       //alert(Name + "\n" + Title + "\n" + Content + "\n" + Latitude + "\n" + Longitude + "\n"); //<-- this works! 
       var position = new google.maps.LatLng(Latitude, Longitude); 
       var contentString = "<h4>" + Name.bold() + "</h4>" + "<br />" + Title.bold() 
           + "<br />" + Content; 

       var marker = new google.maps.Marker({ 
        position: position, 
        title: Title, 
        map: map 
       }); 
       google.maps.event.addListener(marker, 'click', (function(marker, contentString) { 
        return function() { 
         infowindow.setContent(contentString); 
         infowindow.open(map, marker); 
        } 
       })(marker, contentString)); 
       }; 
      })(jsonObject[i].name, jsonObject[i].microposts[j].title, 
       jsonObject[i].microposts[j].content, 
       jsonObject[i].microposts[j].lat, 
       jsonObject[i].microposts[j].lon)(); 
      } 
     } 
     } 
    }; 
    xhr.send(null); 
    } 

    function createMap() { 
    map = new google.maps.Map(document.getElementById('main_map'), { 
     zoom: 10, 
     panControl: true, 
     zoomControl: true, 
     zoomControlOptions: { 
     style: google.maps.ZoomControlStyle.SMALL 
     }, 
     mapTypeControl: true, 
     scaleControl: true, 
     streetViewControl: true, 
     overviewMapControl: true, 
     scrollwheel: false, 
     center: new google.maps.LatLng(37.975327,23.728701), 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
    }); 
    } 


    function initAddress() { 
    if (navigator.geolocation) { 
     navigator.geolocation.getCurrentPosition(showPosition); 
    } 
    else { 
     var position = new google.maps.LatLng(0, 0); 
     map.setCenter(position); 
    } 
    } 

    function showPosition(position) { 
    var position = new google.maps.LatLng(position.coords.latitude, position.coords.longitude); 
    map.setCenter(position); 
    } 

    return { 

    initMap : function() { 
     createMap(); 
     initAddress(); 
     addMarkers(); 
    } 
    }; 
}(); 

document.addEventListener("DOMContentLoaded", GMAPS.mainMap.initMap, false); 

Answer 1

**注：您在您的IIFE结束不必要的额外的一组括号中。

您IIFE之前（最内层的环内），试着加入：

var jObj = jsonObject[i], mPost = jObj.microposts[j]; 

然后用替换参数给IIFE：

(function(Name, Title, Content, Latitude, Longitude) { 
       return function() { 
       //alert(Name + "\n" + Title + "\n" + Content + "\n" + Latitude + "\n" + Longitude + "\n"); //<-- this works! 
       var position = new google.maps.LatLng(Latitude, Longitude); 
       var contentString = "<h4>" + Name.bold() + "</h4>" + "<br />" + Title.bold() 
           + "<br />" + Content; 

       var marker = new google.maps.Marker({ 
        position: position, 
        title: Title, 
        map: map 
       }); 
       google.maps.event.addListener(marker, 'click', (function(marker, contentString) { 
        return function() { 
         infowindow.setContent(contentString); 
         infowindow.open(map, marker); 
        } 
       })(marker, contentString)); 
       }; 
      })(jObj.name, mPost.title, mPost.content, mPost.lat, mPost.lon); 

Answer 2

下面的代码应该工作。我仍然不明白为什么你有额外的括号。

xhr.onreadystatechange = function() { 
    var i = 0, j = 0; 
    if (xhr.readyState == 4 && xhr.status == 200) { 
    jsonObject = JSON.parse(xhr.responseText); 
    for (var ilen = jsonObject.length; i < ilen;) { 
     for (var jObj = jsonObject[i++], jlen = jObj.microposts.length; j < jlen;) { 
     var mPost = jObj.microposts[j++]; 
     (function(Name, Title, Content, Latitude, Longitude) { 
      return function() { 
      //alert(Name + "\n" + Title + "\n" + Content + "\n" + Latitude + "\n" + Longitude + "\n"); //<-- this works! 
      var position = new google.maps.LatLng(Latitude, Longitude); 
      var contentString = "<h4>" + Name.bold() + "</h4>" + "<br />" + Title.bold() 
          + "<br />" + Content; 

      var marker = new google.maps.Marker({ 
       position: position, 
       title: Title, 
       map: map 
      }); 
      google.maps.event.addListener(marker, 'click', (function(marker, contentString) { 
       return function() { 
        infowindow.setContent(contentString); 
        infowindow.open(map, marker); 
       } 
      })(marker, contentString)); 
      }; 
     })(
      jObj.name, mPost.title, mPost.content, mPost.lat, mPost.lon 
     ); 
     } 
    } 
    } 
};