자바 스크립트는 마지막 마커 만 표시합니다.

Question

다음 코드는 6 명의 사용자가 5 개의 마이크로 포스트를 포함하는 /home.json URL의 일부 JSON 데이터를 가져옵니다. 그러나 마지막 4 개의 마커 만 표시됩니다 (5 번째조차도!). 나는 벌레를 발견하기 위해 2 일을 보내었다. 그러나 불행하게도 나는 이것이 왜 dosen't 일하는지 정말로 알 수 없다. 누구든지 나를 도울 수 있다면 정말 감사하겠습니다!

경고를 통해 모든 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

** 참고 : 당신이 당신의 인생의 끝에 괄호의 불필요한 여분의 세트가있다.

당신의 인생 전에 (대한 루프 안쪽 내부), 추가 시도 :

var jObj = jsonObject[i], 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); 

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