Question

我想使用Google Maps API创建地图，并将多个标记连接到各个事件监听器。

我的JS文件看起来像这样（缩写）：

var MainObject = (function($) {

    return {
        init: function() {
            this.set_up_map(); 
    },

    set_up_map: function() {
        //...
        var map = new google.maps.Map(map_div, map_props);

        function add_click_events(row_id) {
            $(row_id).addClass('highlight');
        }

        function draw_rows(rows) {
            for (var i = 0; i < rows.length; i++) {
                var row = rows[i];
                var row_latlng = new google.maps.LatLng(
                    row.lat,
                    row.long);
                var marker = new google.maps.Marker(
                    {
                        position: row_latlng,
                        map: map,
                    });

                google.maps.event.addListener(marker,
                    "click",
                    function() {add_click_events(row);}
                );
            }
        }
        // call data
        draw_rows(rows);
        }
    })(jQuery);

我希望迭代标记并将每个标记连接到它的回调（具有应该突出显示的单个row_id）。但是使用上面的结构，我用最后一个覆盖所有事件监听器（因此无论点击哪个标记，只有最后一行突出显示）。

调试甚至解决此问题的好方法是什么？

Answer 1

你应该使用函数闭包。

function draw_rows(rows) {
        for (var i = 0; i < rows.length; i++) {
            (function(row){
              var row_latlng = new google.maps.LatLng(
                row.lat,
                row.long);
                var marker = new google.maps.Marker(
                  {
                    position: row_latlng,
                    map: map,
                  });

                google.maps.event.addListener(marker,
                  "click",
                  function() {add_click_events(row);}
                );
            })(rows[i]);
        }
    }

此外，您可以使用let，但仅在最新的浏览器中支持

let row = rows[i];

Answer 2

你需要使用一个闭包： -

(function(i) {
  var row = rows[i];
  var row_latlng = new google.maps.LatLng(
    row.lat,
    row.long);
  var marker = new google.maps.Marker({
    position: row_latlng,
    map: map,
  });
  google.maps.event.addListener(marker,
    "click",
    function() {
      add_click_events(row);
    }
  );
})(i);

如何防止覆盖事件侦听器

2 个答案: