gmaps4rails按ID选择标记

时间:2013-02-24 11:40:13

标签: jquery ruby-on-rails-3 google-maps google-maps-api-3 gmaps4rails

当用户将鼠标悬停在给定链接上时,我想打开一个信息窗口。

我已经给出了所有标记ID,并且链接具有相同的ID。我可以让悬停打开一个信息窗口,我只是不确定如何根据链接的ID和正确的标记打开它。

Js:它会在地图上弹出一个信息框,只是不确定如何在地图上指定正确的ID。

  <script type="text/javascript">
    $(document).ready(function() {
      Gmaps.map.callback = function() {
        $(".items li a").on("mouseover", function() {
          //alert(this.id);
          var marker = Gmaps.map.markers[0]; //this.id
          var map         = Gmaps.map.serviceObject
          marker.infowindow.open(map, marker.serviceObject);
        });
      }
    });
  </script>

标记:

@json = @events.to_gmaps4rails do |event, marker|
  marker.infowindow render_to_string(:partial => "/events/hover", :locals => { :event => event })
  marker.title   "#{event.place.name}"
  marker.json({ :id => event.id })
end

链接:

<%= link_to event.place.name, pub_path(event.place), id: event.id %>

1 个答案:

答案 0 :(得分:2)

你很亲密。您必须遍历所有标记才能找到正确的标记。使用underscore.js您可以执行以下操作:

Gmaps.map.callback = function() {
  $(".items li a").on("mouseover", function() {

    //id of selected marker
    i = $(this).attr("id");
    marker = _.find(Gmaps.map.markers, function(obj) { return obj.id == i })
    var map         = Gmaps.map.serviceObject          
    marker.infowindow.open(map, marker.serviceObject);
  });
}