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 
     ); 
     } 
    } 
    } 
};