javascript - 单击时获取标记的 ID

Question

我正在使用 gmaps4rails 将 map 添加到我的 Rails 应用程序。我正在尝试通过单击标记来记录用户的年龄。

在我的索引操作中我有 -

    @json = User.all.to_gmaps4rails do |user, marker|
      marker.json({ :id => user.id, :age => user.age })
    end

这是创建 map 并添加我所有的标记。

如果我将 Gmaps.map.markers[0] 放在我的 js 控制台中，我可以看到我的对象并且可以看到它有一个 age 属性。

我正在尝试通过点击记录该属性，方法如下 -

<script type="text/javascript">
  Gmaps.map.callback = function() {
  for (var i = 0; i <  this.markers.length; ++i) {
    google.maps.event.addListener(
     Gmaps.map.markers[i].serviceObject, 'click', function() { console.log(this.age) });
  }
 };        
</script>

this.age 未定义。显然，它正在记录 serviceObject 而不是标记对象。

我做错了什么？

Answer 1

您正在处理一个闭包，并且遇到了一个问题，其中“this”没有引用您认为它引用的对象。为了引用 Gmaps.map.markers[*]，首先创建一个立即函数，按值传入 'i'，并返回一个记录 .age 属性的函数:

<script type="text/javascript">
  Gmaps.map.callback = function() {
  for (var i = 0; i <  this.markers.length; ++i) {
    google.maps.event.addListener(
     marker.serviceObject, 'click', (function(i) {
        return function() {
            console.log(Gmaps.map.markers[i].age) 
        }
    })(i));
  }
 };        
</script>

在循环中声明函数(闭包)可能很棘手。这是我发现的一个非常有用的演练解释:http://www.mennovanslooten.nl/blog/post/62