4

gmaps4railsを使用してRailsアプリにマップを追加しています。マーカーをクリックしてユーザーの年齢を記録しようとしています。

私のインデックスアクションでは- 

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

これは、マップを作成し、すべてのマーカーを追加しています。

jsコンソールにGmaps.map.markers[0]を配置すると、オブジェクトが表示され、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をログに記録しています。

私は何が間違っているのですか？

4

2 に答える 2

4

クロージャーを使用していて、「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

于 2012-05-29T22:27:17.987 に答える
1

クロージャーを適切に使用するには、次のようにします。

<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>
于 2012-05-29T22:18:27.960 に答える