Javascript Loop - 2-я переменная не отображается

Question

Вот код:

<script type="text/javascript">
  var offender_locations = [
    ["10010", "xxxxx", 3],
    ["10001", "xxxxx", 2],
    ["10002", "zzzzz", 1]
  ];
  for (i = 0; i < offender_locations.length; i++) {
    var address = offender_locations[i][0];
    var icon_img = offender_locations[i][1];
  }
</script>

Это вывод:

1) 10010 - zzzzz
2) 10001 - zzzzz
3) 10002 - zzzzz

Как видите, var address выводит правильное значение, но * var icon_img * всегда повторяет одно и то же значение.

IЯ новичок в Javascript, и я попробовал все возможные способы, но я все еще получаю те же результаты.

PS Я вставил полный скрипт сюда:

<script type="text/javascript">
  var offender_locations = [
    ["10010", "offender_icon.png", 3],
    ["10001", "offender_icon.png", 2],
    ["10002", "visitor_icon.png", 1]
  ];
  var myOptions = {
    zoom: 10,
    center: latlng,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };
  var map = new google.maps.Map(document.getElementById("map"), myOptions);
  var latlng = new google.maps.LatLng(0, 0);

  for (i = 0; i < offender_locations.length; i++) {
    var infowindow = new google.maps.InfoWindow();
    var geocoder_map = new google.maps.Geocoder();
    var address = offender_locations[i][0];
    var icon_img = offender_locations[i][1];
    geocoder_map.geocode({
      'address': address
    }, function (results, status) {
      if (status == google.maps.GeocoderStatus.OK) {
        map.setCenter(results[0].geometry.location);
        var marker = new google.maps.Marker({
          map: map,
          position: map.getCenter(),
          icon: icon_img
        });
        google.maps.event.addListener(marker, 'click', (function (marker, i) {
          return function () {
            infowindow.setContent(offender_locations[i][0]);
            infowindow.open(map, marker);
          }
        })(marker, i));
      } else {
        alert("The requested offender is not mappable !")
      };
    });
  }
</script>

Маркеры в этомВсе сценарии имеют правильный почтовый индекс, но все они имеют одинаковый значок (visitor_icon.png)!

Answer 1

Проблема в том, что вы создаете функцию в цикле. JavaScript имеет только область действия функции, а не область блока То есть Переменные, которые вы создаете в цикле, существуют только один раз во всей функции, только значения меняются за одну итерацию.

В момент оценки icon_img (в обратном вызове, переданном в geocode), внешний цикл for уже завершен, и icon_img имеет значение последней итерации. Это работает для address, потому что оно вычисляется внутри цикла, а не позже.

Вы должны «захватить» текущее значение icon_img, и вы можете сделать это, используя непосредственную функцию:

for (i = 0; i < offender_locations.length; i++) { 
    var infowindow   = new google.maps.InfoWindow(),
        geocoder_map = new google.maps.Geocoder(),
        address      = offender_locations[i][0],
        icon_img     = offender_locations[i][1];

    (function(addr, img) {  // <-- immediate function call
        geocoder_map.geocode({'address': addr}, function(results, status) {
            if (status == google.maps.GeocoderStatus.OK) {
                map.setCenter(results[0].geometry.location);
                var marker = new google.maps.Marker({
                    map: map,
                    position: map.getCenter(),
                    icon: img
                });
                google.maps.event.addListener(marker, 'click', function() {
                    infowindow.setContent(addr);
                    infowindow.open(map, marker);
                });
            } else {
                alert("The requested offender is not mappable !");
            }
        });
    }(address, icon_img)); // <-- immediate function call
}

Может быть, вы должны были сделать это для еще большего количества переменных ... не уверен.