2

私は Gmaps4rails を使用しており、かなりうまく機能していますが、少し困惑しています。おそらく私の初心者のJSスキルが原因です。私はさまざまな質問の例に従おうとしていますが、どこが間違っているのかわかりません。

マップが読み込まれると、Gmaps.map.callback が正常に動作し、マップが読み込まれ、マーカーをクリックするとリスナー イベントが発生します。

私からしてみれば：

<% content_for :scripts do %>
<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(marker){
        return function(){      
      alert(marker.id);
        }
      })(marker)
   )
 }
}
</script>
<% end %>

これは、コントローラーで作成された json からのマーカー ID でアラートを出します。

次に、地図の位置を更新してマーカーを置き換える検索機能を用意します。これは ajax 呼び出しで呼び出されています。したがって、コントローラー .js.erb でこれを行います。

Gmaps.map.replaceMarkers(<%= raw @json %>);

すべて問題ないように見えます。マップには新しいマーカーが読み込まれていますが、偶数リスナーがマーカーで機能しません。

私の質問は、これらの新しいマーカーにクリック イベントのリスナーを持たせるにはどうすればよいかということです。どうにかしてコールバックをリセットする必要がありますか? マップが読み込まれる前に実行する必要があると思いますが、この場合はマップをリロードせず、マーカーを置き換えるだけです。

4

2 に答える 2

3

メソッドを抽出して再利用します。

Gmaps.map.listen_to_markers = function(markers){
  for(var i = 0; i < markers.length; i++){
    marker = markers[i];
    google.maps.event.addListener(marker.serviceObject, 'click', 
      (function(marker){
        return function(){      
          alert(marker.id);
        }
      })(marker)
   )
 }
}

Gmaps.map.callback = function(){
  Gmaps.map.listen_to_markers(Gmaps.map.markers);
}

そして、マーカーを置き換えるたびに:

var new_markers = <%= raw @json %>;
Gmaps.map.replaceMarkers(new_markers);
Gmaps.map.listen_to_markers(new_markers);
于 2013-02-01T08:45:17.287 に答える
0

「content_for」、「Gmaps.map.callback」などを破棄buildMap(<%=raw @hash.to_json %>)します。ビュー ファイルに保持します。

coffeescript ファイルで、コード行の後に独自の作業を挿入しますhandler.fitMapToBounds();

たとえば、ナビゲーション バーの項目をクリックし、特定のマーカーでクリック機能をトリガーして情報ウィンドウを開きます。

.html.erb ファイルでは、

a href="javascript:void(0)" class="mapEventName" id="<%= i %>"><%= event.event_name %>

.js.coffee ファイルで、

$(".mapEventName").on "click", ->
  i = $(this).attr("id")
  marker = markers[i]
  alert(marker.getServiceObject().getPosition().toString())
  google.maps.event.trigger marker.getServiceObject(), "click"

> "
于 2013-12-02T07:57:03.883 に答える