0

私は gmaps4rails でこの動作を取得しようとしています: ユーザーがサイドバーのリンクをクリックすると、マップ上の対応するマーカーが画像/色を変更して、選択したものを他のマーカーより目立たせます。

私はこのコードで試しました

Gmaps.map.callback = function(){
        var len = Gmaps.map.markers.length;
        for(var i = 0; i < len; i++){
            marker = Gmaps.map.markers[i];
            google.maps.event.addListener(marker.serviceObject, 'click', (function(i){
                return function(){
                    console.log($(Gmaps.map.markers[i].serviceObject.ne.ga).attr("src", "/assets/marker_sprite2.png"));
                }
            })(i));
        }
    }

しかし、これはすべてのマーカーの外観を変更します。これは、私がやろうとしていることにはあまり役に立ちません!

とにかくこれを達成する方法はありますか?

編集：以下の回答を参照してください

EDIT 2：このソリューションは私が望んでいたものでしたが、この方法で別の問題に遭遇しました。以下のコメントを参照してください

4

2 に答える 2

2

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(marker){
        return function(){
         console.log($(marker.serviceObject.ne.ga).attr("src", "/assets/marker_sprite2.png"));
        }
      })(marker)
    )
  }
}

あなたの主な問題は少し長く、複雑ではありませんが長いです。アイデアは次のとおりです。

  • id各マーカーにを追加します。to_gmaps4railsメソッドのブロック引数を使用して、さらにjsonを追加できます。

  • サイドバーを自分で作成し、各行にIDを追加して、liをクリックしたときに必要なマーカーを確認します。

  • すべてのマーカーをループして、適切なIDを持つマーカーを取得します

  • 絵を変える

于 2012-09-11T13:57:15.787 に答える
0

私はそれをこのコードで動作させました：

Gmaps.map.callback = function(e){
        var len = Gmaps.map.markers.length;
        var markers = Gmaps.map.markers;
        for(var i = 0; i < len; i++){
            m = Gmaps.map.markers[i];
            google.maps.event.addListener(m.serviceObject, 'click',
                (function(m, markers){
                    return function(){
                        for(a in markers){
                            markers[a].serviceObject.setIcon("/assets/marker_sprite.png");
                        }
                        m.serviceObject.setIcon("/assets/marker_sprite2.png");
                    }
                }(m, markers))
            )
        }
    }

何が起こっているのかというと、各マーカーにクリックリスナーを追加し、このリスナー関数にマーカー自体を渡します。また、マーカー配列全体を渡して、クリックするたびにすべてをリセットし、関心のあるものを目立たせます。これは単純なバージョンです、私の最終バージョンはこれを与えます：

 Gmaps.map.callback = function(){
        var len = Gmaps.map.markers.length;
        var markers = Gmaps.map.markers;
        var anchor = new google.maps.Point(9.5, 34);
        var sAnchor = new google.maps.Point(0, 34);
        var origin = new google.maps.Point(0, 0);
        var sOrigin = new google.maps.Point(28.5, 0);
        var size = new google.maps.Size(28.5,34);

        var markerNormal = new google.maps.MarkerImage("/assets/marker_sprite.png", size, origin, anchor);
        var markerHighlight = new google.maps.MarkerImage("/assets/marker_sprite_bleu.png", size, origin, anchor);
        var shadow = new google.maps.MarkerImage("/assets/marker_sprite.png", size, sOrigin, sAnchor);
        for(var i = 0; i < len; i++){
            m = Gmaps.map.markers[i];
            google.maps.event.addListener(m.serviceObject, 'click',
                (function(m, markers){
                    return function(){
                        console.log(m);
                        for(a in markers){
                            markers[a].serviceObject.setIcon(markerNormal);
                            markers[a].serviceObject.setZIndex(1);
                            markers[a].serviceObject.shadow = shadow;
                        }
                        Gmaps.map.map.setZoom(7);
                        m.serviceObject.setZIndex(99);
                        m.serviceObject.setIcon(markerHighlight);
                    }
                }(m, markers))
            )
        }
    }

改善できることがあれば、コメントしてください:)

于 2012-09-12T12:48:23.580 に答える