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

Question

我有一张带有多个标记的 map 。

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

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

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

 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 循环中创建了它们 - 但有办法解决这个问题吗？

Answer 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