附加事件到 Google Maps API (v3) Infowindow 内的元素触发多次答案

【问题标题】：Attached event to element inside Google Maps API (v3) Infowindow fires multiple times附加事件到 Google Maps API (v3) Infowindow 内的元素触发多次
【发布时间】：2015-09-08 19:37:04
【问题描述】：

我有一张带有多个标记的地图。

当用户单击标记时，会打开一个带有一些内容（我从某个 JSON 数组中获取）的信息窗口，我希望用户能够在此处单击一个元素并在此之后调用一个函数。

但是，我的问题是这个函数被调用了 X 次，其中 X 是地图上标记的数量。

这就是我获取标记数据的方式：

 function setupMarkers(mapObject) {
    $.ajax({
        type: "GET",
        url: "api/events",
        datatype: "json",
        success: function(response) {
            var infoWindow = new google.maps.InfoWindow();
            for (var i = 0; i < response.length; i++) {
                var event = {
                    id: response[i].eventsid,
                    markerid: "markerEvent" + i,
                    latitude: response[i].latitude,
                    longitude: response[i].longitude,
                    // ...
                };

                var eventMarker = new google.maps.Marker({
                    position: new google.maps.LatLng(event.latitude, event.longitude),
                    map: mapObject
                });

                var template = $('#marker-template').html();
                var rendered = Mustache.render(template, event);
                makeInfoWindow(eventMarker, mapObject, infoWindow, rendered);
            }
        }
    });
}

这是我正在使用的模板：

<script id="marker-template" type="x-tmpl-mustache">
  <div class='info-window'>
    <h2><a href='#' id='{{markerid}}' data-eventid='{{id}}'>{{title}}</a></h2>
    <p>{{attending}} user(s) are going</p>
  </div>
</script>

这是makeInfoWindow

function makeInfoWindow(marker, map, infoWindow, content) {
    google.maps.event.addListener(marker, 'click', function() {
        infoWindow.setContent(content);
        infoWindow.open(map, marker);
    });

    google.maps.event.addListener(infoWindow, 'domready', function() {
        $("a[id^=markerEvent]").click(function(e) {
            var id = document.getElementById(e.target.id).dataset.eventid;

            // prints the id X times (where X is the number of markers on the map)
            console.log(id);

            // doSomething(id);
        });
    });
}

我怀疑我的问题是所有标记共享一个 InfoWindow 实例，因此每个标记都会触发事件，因为我在 for 循环中创建它们 - 但有没有办法解决这个问题？

【问题讨论】：

标签： javascript jquery google-maps google-maps-api-3

【解决方案1】：

好吧，没关系 - 我很愚蠢。动起来

google.maps.event.addListener(infoWindow, 'domready', function() {
    $("a[id^=markerEvent]").click(function (e) {
      var id = document.getElementById(e.target.id).dataset.eventid;
      // doSomething(id);
    });
});

从makeInfoWindow 中取出并放在下面

var infoWindow = new google.maps.InfoWindow();

在setupMarkers

【讨论】：