Question

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

当用户点击标记时，Infowindow会打开一些内容（我从某些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循环中创建它们 - 但有没有办法解决这个问题？

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

on setupMarkers

Google Maps API（v3）中的元素附加事件Infowindow会多次触发

1 个答案: