Javascript 将事件侦听器添加到多个映射标记

我有以下功能来设置标记

function setMarkers(map, locations, contenido) {
      // Add markers to the map
      console.log(contenido);
      // Marker sizes are expressed as a Size of X,Y
      // where the origin of the image (0,0) is located
      // in the top left of the image.

      // Origins, anchor positions and coordinates of the marker
      // increase in the X direction to the right and in
      // the Y direction down.
      var image = {
        url: '<?php echo Yii::$app->request->baseUrl."/images/pinrojo.png";?>',
        // This marker is 20 pixels wide by 32 pixels tall.
        size: new google.maps.Size(20, 32),
        // The origin for this image is 0,0.
        origin: new google.maps.Point(0,0),
        // The anchor for this image is the base of the flagpole at 0,32.
        anchor: new google.maps.Point(0, 32)
      };
      // Shapes define the clickable region of the icon.
      // The type defines an HTML &lt;area&gt; element 'poly' which
      // traces out a polygon as a series of X,Y points. The final
      // coordinate closes the poly by connecting to the first
      // coordinate.
      var shape = {
          coords: [1, 1, 1, 20, 18, 20, 18 , 1],
          type: 'poly'
      };

      var objeto_contentString = {};
      var objeto_infowindow = {};
      var object_marker = {};

      for (var i = 0; i < locations.length; i++) {
            objeto_contentString['contentString' + i ] = contenido[i]["META"] + "<BR/>" + contenido[i]["VENTA"];
            objeto_infowindow['infowindow' + i] = new google.maps.InfoWindow({
            content: objeto_contentString['contentString' + i ]
        });
        var beach = locations[i];
        var myLatLng = new google.maps.LatLng(beach[1], beach[2]);
            object_marker['marker' + i] = new google.maps.Marker({
            position: myLatLng,
            map: map,
            icon: image,
            shape: shape,
            title: beach[0],
            zIndex: beach[3]
        });


          google.maps.event.addListener(object_marker['marker' + i], 'click', function() {
          objeto_infowindow['infowindow' + i].open(map,object_marker['marker' + i]);
        });
      }

       console.log(objeto_contentString);
    }

功能设置标记（地图、位置、上下文）{
//向地图添加标记
console.log（contenido）；
//标记大小表示为X，Y的大小
//图像（0,0）的原点所在的位置
//在图像的左上角。
//标记的原点、锚定位置和坐标
//沿X方向向右和向内增加
//Y方向向下。
变量图像={
url:“”，
//此标记宽20像素，高32像素。
大小：新谷歌地图大小（20,32），
//此图像的原点为0,0。
来源：新google.maps.Point（0,0），
//此图像的锚定位于旗杆底部0,32处。
主播：新google.maps.Point（0,32）
};
//形状定义图标的可单击区域。
//该类型定义了一个HTML区域元素“poly”，该元素
//将多边形绘制为一系列X、Y点。最终
//坐标通过连接到第一个多边形来关闭多边形
//协调。
变量形状={
coords:[1,1,1,20,18,20,18,1]，
类型：“poly”
};
var objeto_contentString={}；
var objeto_infowindow={}；
var object_marker={}；
对于（变量i=0；i”+contenido[i][“VENTA”]；
objeto_infowindow['infowindow'+i]=新的google.maps.infowindow({
内容：objeto_contentString['contentString'+i]
});
var beach=位置[i]；
var mylatng=new google.maps.LatLng（beach[1]，beach[2]）；
object_marker['marker'+i]=新的google.maps.marker({
职位：myLatLng，
地图：地图，
图标：图像，
形状：形状，
标题：海滩[0]，
zIndex:海滩[3]
});
google.maps.event.addListener（object_marker['marker'+i]，'click'，function（）{
对象信息窗口['infowindow'+i]。打开（映射，对象标记['marker'+i]）；
});
}
日志（objeto_contentString）；
}

---

我想知道如何向每个标记添加事件侦听器，但如何添加？有没有办法动态添加这些元素侦听器？我听说了一些关闭，但不知道如何实施。使用当前代码，它将只向循环中数组的最后一个元素添加侦听器。

创建markerArray以跟踪标记，而不是marker对象

var markerArray=[];

然后使用for循环将所有标记添加到数组中。 然后，最后使用另一个for循环遍历markerArray以添加所有侦听器：

for(var i=0;i<markerArray.length;i++){
    markerArray[i].on("click",function(){...});
} 

---

for（var i=0；iGoogleMap允许您向多个标记添加事件侦听器。但是，由于您正在为所有不同的标记重用标记变量，因此上述代码无法工作。您应该做的是，为每个对象分配一个标记变量。不要为所有项目重用
object\u marker

  // var object_marker = {}; // DONT USE IT
  var markerCollections = [];
  var objeto_infowindow = [];

  for (var i = 0; i < locations.length; i++) {
        objeto_contentString['contentString' + i ] = contenido[i]["META"] + "<BR/>" + contenido[i]["VENTA"];
        objeto_infowindow['infowindow' + i] = new google.maps.InfoWindow({
        content: objeto_contentString['contentString' + i ]
    });
    var beach = locations[i];
    var myLatLng = new google.maps.LatLng(beach[1], beach[2]);
    // One object marker per one entity
    var object_marker = new google.maps.Marker({
        position: myLatLng,
        map: map,
        icon: image,
        shape: shape,
        title: beach[0],
        zIndex: beach[3]
    });

    var onclick = function(objeto_infowindow,marker){
        var obj = objeto_infowindow;
        return function(){
            obj.open(map,marker);
        }
    }

    google.maps.event.addListener(object_marker, 'click', onclick(objeto_infowindow['infowindow' + i], object_marker) );


    // Keep the marker for later clean up if required
    markerCollections.push(object_marker);
  }

//var object\u marker={}；//不要使用它
var markerCollections=[]；
var objeto_infowindow=[]；
对于（变量i=0；i”+contenido[i][“VENTA”]；
objeto_infowindow['infowindow'+i]=新的google.maps.infowindow({
内容：objeto_contentString['contentString'+i]
});
var beach=位置[i]；
var mylatng=new google.maps.LatLng（beach[1]，beach[2]）；
//每个实体一个对象标记
var object_marker=新的google.maps.marker({
职位：myLatLng，
地图：地图，
图标：图像，
形状：形状，
标题：海滩[0]，
zIndex:海滩[3]
});
var onclick=函数（对象信息窗口，标记）{
var obj=objeto_信息窗口；
返回函数（）{
对象打开（地图、标记）；
}
}
google.maps.event.addListener（object_标记，'click'，onclick（object_信息窗口['infowindow'+i]，object_标记））；
//如果需要，保留标记以便以后清理
markerCollections.push（对象标记）；
}
我仍然有相同的问题：
未捕获类型错误：每次我要单击标记时都无法读取未定义的属性“open”。这是因为对象信息窗口['infowindow'+I]未正确绑定到事件。我已对代码进行了一些更改。请尝试一下。几乎完成了，这是我单击任何其他标记时唯一的问题，信息窗口将在同一标记中显示信息。标记对象也应绑定到闭包。现在是否可以正常工作？您可能需要对其进行进一步重构以使它更干净。很高兴它有帮助：）可能重复的