使用 Gmaps4rails gem 调用 replaceMarkers 后 Gmaps.map.callback 不起作用？答案

【问题标题】：Gmaps.map.callback not working after calling replaceMarkers using Gmaps4rails gem?使用 Gmaps4rails gem 调用 replaceMarkers 后 Gmaps.map.callback 不起作用？
【发布时间】：2013-01-31 03:56:35
【问题描述】：

我正在使用 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 %>);

一切似乎都很好，我的地图加载了新的标记，但偶数侦听器在标记上不起作用。

所以我的问题是，如何让这些新标记拥有点击事件的监听器。我需要以某种方式重置回调吗？我认为它必须在地图加载之前运行，但在这种情况下，我不会重新加载地图，只是替换标记。

【问题讨论】：

回调并不意味着每次添加标记时都会触发。简单
@apneadiving 不确定您的回复是否被截断。如何在调用 replaceMarkers 后将侦听器事件附加到标记？

标签： javascript ruby-on-rails google-maps ruby-on-rails-3.2 gmaps4rails

【解决方案1】：

提取您的方法以重用它：

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);

【讨论】：

这很好用。如果我有更多的声誉，我也会为你投票。我正在尝试与此类似的事情，但无法做到正确。这也让我更深入地了解它是如何工作的。非常感谢。

【解决方案2】：

丢弃“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"

> "

【讨论】：