将事件侦听器添加到多个地图标记

Question

我有以下功能来设置标记。

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);
    }

我想知道如何为每个标记添加一个事件侦听器，但是怎么做呢？有没有办法动态添加那些元素监听器？我听说过一些闭包，但不确定如何实施。使用当前代码，它将只向循环中数组的最后一个元素添加一个侦听器。

Answer 1

代替标记对象，创建 markerArray 来跟踪标记。

var markerArray=[];

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

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

Answer 2

GoogleMap 允许您向多个标记添加事件侦听器。但是，由于 您正在为所有不同的标记重用标记变量 ，因此您上面的代码将无法工作。您应该做的是，为每个对象分配一个标记变量。不要对所有项目重复使用 object_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);
  }

将事件侦听器添加到多个地图标记

Add event listeners to several map markers

javascript

google-maps

google-maps-api-3

google-maps-markers