Javascript 谷歌地图API信息窗口

我有一个带有多个标记的谷歌地图。我正在尝试在信息窗口中显示每个标记的信息：

function initializeMaps() {
      var latlng = new google.maps.LatLng(59.4920, 37.3010);
      var myOptions = {
          zoom: 6,
          center: latlng,
          disableDefaultUI: false,
          scrollwheel: false,
          mapTypeId: google.maps.MapTypeId.ROADMAP,
      };
      var infoWindow = new google.maps.InfoWindow();
      var latlngbounds = new google.maps.LatLngBounds();
      var map = new google.maps.Map(document.getElementById('map'),myOptions);

      var mc = new MarkerClusterer(map);
      var marker, i;
        for (i = 0; i < data.markers.length; i++) { 
              var image = "/images/markers/green-marker.png";
              marker = new google.maps.Marker({
              position: new google.maps.LatLng(data.markers[i].lat, data.markers[i].lng),
              map: map,
              title: data.markers[i].name,
              icon: image,
            });
            /*jshint loopfunc: true */
            (function (marker, data) {
            google.maps.event.addListener(marker, "click", function (e) {

                for (i=0; i<data.markers.length; i++) {
                    infoWindow.setContent("<div style = 'min-width:200px;min-height:40px'>" + '<img src="' + data.markers[i].link + '" style="height:150px;width:250px;" />' + "<br />" + data.markers[i].description + "<br />" + "<button>Read More</button>" + "</div>");
                    infoWindow.open(map, marker);
                }

            });
        })(marker, data);
        latlngbounds.extend(marker.position);

            mc.addMarker(marker);
        }
        var bounds = new google.maps.LatLngBounds();
    }

---

我的错误是什么？

因此，您只能看到最后一个元素信息

var marker, i;
for (i = 0; i < data.markers.length; i++) { 
      var image = "/images/markers/green-marker.png";
      marker = new google.maps.Marker({
          position: new google.maps.LatLng(data.markers[i].lat, data.markers[i].lng),
          map: map,
          title: data.markers[i].name,
          icon: image,
      });

      google.maps.event.addListener(marker, "click", function (e) {
          ...
      });
}

---

因此，您只能看到最后一个元素信息

var marker, i;
for (i = 0; i < data.markers.length; i++) { 
      var image = "/images/markers/green-marker.png";
      marker = new google.maps.Marker({
          position: new google.maps.LatLng(data.markers[i].lat, data.markers[i].lng),
          map: map,
          title: data.markers[i].name,
          icon: image,
      });

      google.maps.event.addListener(marker, "click", function (e) {
          ...
      });
}

---

有关问题的副本：

您不会在click listener中的

i

变量上得到函数闭包，而在click listener中的循环中，信息将始终保留在数据中最后一个条目的信息窗口中：

(function (marker, data) {
    google.maps.event.addListener(marker, "click", function (e) {

        for (i=0; i<data.markers.length; i++) {
            infoWindow.setContent("<div style = 'min-width:200px;min-height:40px'>" + '<img src="' + data.markers[i].link + '" style="height:150px;width:250px;" />' + "<br />" + data.markers[i].description + "<br />" + "<button>Read More</button>" + "</div>");
            infoWindow.open(map, marker);
        }

    });
})(marker, data);

---

相关问题的副本：

您不会在click listener中的

i

变量上得到函数闭包，而在click listener中的循环中，信息将始终保留在数据中最后一个条目的信息窗口中：

(function (marker, data) {
    google.maps.event.addListener(marker, "click", function (e) {

        for (i=0; i<data.markers.length; i++) {
            infoWindow.setContent("<div style = 'min-width:200px;min-height:40px'>" + '<img src="' + data.markers[i].link + '" style="height:150px;width:250px;" />' + "<br />" + data.markers[i].description + "<br />" + "<button>Read More</button>" + "</div>");
            infoWindow.open(map, marker);
        }

    });
})(marker, data);

addMarker在哪里的副本？添加marker对吗？即使它现在起作用，你也应该解析你的MarkerPosReplicate，你的addMarker在哪里？添加marker对吗？即使它现在起作用，你也应该解析你的markerPos

(function(marker, data) {
  google.maps.event.addListener(marker, "click", function(e) {

    infoWindow.setContent("<div style = 'min-width:200px;min-height:40px'>" + '<img src="' + data.link + '" style="height:150px;width:250px;" />' + "<br />" + data.description + "<br />" + "<button>Read More</button>" + "</div>");
    infoWindow.open(map, marker);
  });
})(marker, data.markers[i]);