Question

我正在使用gmaps4rails将地图添加到我的rails应用。我正在尝试通过单击标记来记录用户的年龄。

在我的索引操作中，我有 -

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

这是创建地图并添加所有标记。

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

我正在尝试通过执行此类操作来点击该属性 -

<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

Answer 2

要正确使用闭包，请执行以下操作：

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

点击时获得标记的ID

2 个答案: