자바 스크립트에서 반복적으로 예상치 못한 결과가 발생합니다.

Question

Google지도에 마커를 추가하려고하는데 이러한 마커에 숫자가 표시되지만 루프를 통해 반복되는 동일한 마커가 표시되는 이유는 무엇입니까? 여기에 내 코드,

function codeAddress() { 
var address = ['hd3 3nn', 'hd6 3qf']; 
for (var i = 0; i < address.length; i++) { 
    var num = i; 
    geocoder.geocode({ 'address': address[i]}, function(results, status) { 
     if (status == google.maps.GeocoderStatus.OK) { 
      var image = new google.maps.MarkerImage('/~udders/wp-content/themes/muslenh2/img/markers/marker' + num + '.png', 
        new google.maps.Size(20, 34), 
        new google.maps.Point(0, 0), 
        new google.maps.Point(10, 34)); 
      map.setCenter(results[0].geometry.location); 
      var marker = new google.maps.Marker({ 
       map: map, 
       icon: image, 
       position: results[0].geometry.location 
      }); 
     } else { 
      alert('Geocode was not successful for the following reason: ' + status); 
     } 
    }); 
} 

은}입니다

기본적으로이/~ 유방/WP - 콘텐츠/테마/m/IMG/마커/마커 '+ NUM +'.png를 만들고있다,/~ 유방/wp-content/themes/m/img/markers/marker1.png 하나는 마지막 루프의 번호이며 이전 아이콘 이미지를 모두 덮어 쓰는 것 같습니다.

Answer 1

이것은 how Javascript closures work입니다.

콜백 함수를 반환하는 별도의 함수를 만들어이 문제를 해결할 수 있습니다.

function codeAddress() { 
    var address = ['hd3 3nn', 'hd6 3qf']; 
    for (var i = 0; i < address.length; i++) { 
     geocoder.geocode({'address': address[i]}, getGeocoderCallBack(i)); 
    } 
} 

function getGeocoderCallback(num) { 
    return function (results, status) { 
     if (status == google.maps.GeocoderStatus.OK) { 
      var image = new google.maps.MarkerImage('/~udders/wp-content/themes/muslenh2/img/markers/marker' + num + '.png', 
      new google.maps.Size(20, 34), 
      new google.maps.Point(0, 0), 
      new google.maps.Point(10, 34)); 
      map.setCenter(results[0].geometry.location); 
      var marker = new google.maps.Marker({ 
       map: map, 
       icon: image, 
       position: results[0].geometry.location 
      }); 
     } else { 
      alert('Geocode was not successful for the following reason: ' + status); 
     } 
    }; 
}