javascript - 在循環中使用 Google 地圖地理編碼和標記

我在這裡完全困惑。我有一個物件清單，每個物件都包含一個地點。我使用 google.maps.geocoder 查詢這個地點，之後我會在地圖上為該地點放置一個標記。

但是不知為何只出現了一個標記。我猜這可能與我在這裡其他討論串中看到的閉包問題有關，但我似乎無法將解決方案應用到我手上的情況。

我的程式碼如下：

var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
  map.fitBounds(bounds);

  for (var item in list) {
    var geocoder = new google.maps.Geocoder();
    var geoOptions = {
      address: item.location,
      bounds: bounds,
      region: "NO"
    };
    geocoder.geocode(geoOptions, function(results, status) {
      if (status == google.maps.GeocoderStatus.OK) {
        addMarker(map, item, results[0].geometry.location);
      } else {
        console.log("Geocode failed " + status);
      }
    });
  }

function addMarker(map, item, location) {
  var marker = new google.maps.Marker({ map : map, position : location});
  marker.setTitle(item.title);
  var infowindow = new google.maps.InfoWindow( {
    content : item.body,
    size : new google.maps.Size(100, 300)
  });
  (function(map, marker) {
    new google.maps.event.addListener(marker, "click", function() {
      infowindow.open(map, marker);
    });
    })(map, marker);
  }

任何幫助都感激。

更新：為了避免像第一個答案中建議的迴圈閉包問題，我已將程式碼更改為這樣：

//This is the entry
function codeLocations(list, map) {
  for (var i = 0; i < list.length; i++) {
    console.log("Looping " + list[i].location);
    var geocoder = new google.maps.Geocoder();
    var geoOptions = {
      address: list[i].location,
      bounds: getBounds(),
      region: "NO"
    };
    geocoder.geocode(geoOptions, createGeocodeCallback(list[i], map));
  }
}

function createGeocodeCallback(item, map) {
  console.log("Generating geocode callback for " + item.location);
  return function(results, status) {
    if (status == google.maps.GeocoderStatus.OK) {
      console.log("Geocoding " + item.location + " OK");
      addMarker(map, item, results[0].geometry.location);
    } else {
      console.log("Geocode failed " + status);
    }
  }
}

function addMarker(map, item, location) {
  console.log("Setting marker for " + item.location + " (location: " + location + ")");
  var marker = new google.maps.Marker({ map : map, position : location});
  marker.setTitle(item.title);
  var infowindow = new google.maps.InfoWindow( {
    content : item.body,
    size : new google.maps.Size(100, 300)
  });
  new google.maps.event.addListener(marker, "click", function() {
    infowindow.open(map, marker);
  });
}

根據日誌聲明，我現在在正確的位置擁有正確的對象，這意味著每次設置標記時，項目和位置對象都是不同的，但我在地圖上仍然只看到一個標記。這怎麼可能呢？

答案＃1

不要在迴圈中建立閉包。那樣根本行不通。這可能是一個解決這個問題的方法：

  function callback() {
    return function(results, status) {
      if (status == google.maps.GeocoderStatus.OK) {
        addMarker(map, item, results[0].geometry.location);
      } else {
        console.log("Geocode failed " + status);
      }
    };
  }

  for (var item in list) {
    var geocoder = new google.maps.Geocoder();
    var geoOptions = {
      address: item.location,
      bounds: bounds,
      region: "NO"
    };
    geocoder.geocode(geoOptions, callback());
  }