1

マウスがマーカーの上にあるときに情報ウィンドウが表示されるようにします。

$(document).on 'map:ready', -> addHoverHandlers()

addHoverHandlers = ->
  # m is Gmap4Rails marker, doc in gmaps4rails.base.js.coffee
  for m in Gmaps.map.markers
    # marker is a Google Maps Marker
    # https://developers.google.com/maps/documentation/javascript/reference#Marker
    marker = m.serviceObject

    console.log marker.getPosition().toString()
    # Show the infowindow when user mouses-in
    google.maps.event.addListener marker, "mouseover", ->
      console.log marker.getPosition().toString()
      m.infowindow.open marker.map, marker

    # Hide the infowindow when user mouses-out
    google.maps.event.addListener marker, "mouseout", ->
      m.infowindow.close()

このコードは、ロード時にこれを出力します。

(39.7317, -104.92099999999999)
(35.2638, -118.91200000000003)
(36.6624, -121.64499999999998)

しかし、これは各マーカーの上にマウスを置くと(座標は変化しません):

(36.6624, -121.64499999999998)

質問をコンテキストに入れるためにmap:ready、erb ファイルでイベントをトリガーする方法を次に示します。

<% content_for :scripts do %>
    <script type="text/javascript">
        Gmaps.map.callback = function(){
            console.log('callback');
            $(document).trigger('map:ready');
        }
    </script>
<% end %>
<%= yield :scripts %>
4

1 に答える 1

2

まったく同じ問題がありました。理由はわかりませんが、Gmaps.map.markers をループしてマウスオーバー リスナー関数をバインドしようとすると、常にマーカー変数がループ内の最後のマーカーとして評価されます。

私の回避策は次のとおりです。マウスオーバー関数でマーカー変数を使用しないでください。this代わりにGmaps マーカーオブジェクトを使用し、Gmaps.map.markers をループして、一致するものを見つけます。

コードの変更は次のとおりです。

$(document).on 'map:ready', -> addHoverHandlers()

addHoverHandlers = ->
  # m is Gmap4Rails marker, doc in gmaps4rails.base.js.coffee
  for m in Gmaps.map.markers
    # marker is a Google Maps Marker
    # https://developers.google.com/maps/documentation/javascript/reference#Marker
    marker = m.serviceObject

    console.log marker.getPosition().toString()
    # Show the infowindow when user mouses-in
    google.maps.event.addListener marker, "mouseover", ->
      console.log marker.getPosition().toString()
      # Loop on Gmaps.map.markers and find the one using this
      for m2 in Gmaps.map.markers
        if m2.serviceObject == this
          m2.infowindow.open m2.serviceObject.map, m2.serviceObject

    # Hide the infowindow when user mouses-out
    google.maps.event.addListener marker, "mouseout", ->
      m.infowindow.close()

マウスオーバー機能を実装するのは非常に非効率的な方法であることはわかっています。少なくとも、それは機能します。

h番目

于 2013-03-12T03:53:54.290 に答える