ruby-on-rails – Google Maps for Rails – 使用AJAX更新标记

我想使用Ajax来避免刷新页面.所以我添加了remote：true表单,控制器中的respond_to和新的search.js.erb.我的search.js.erb呈现了部分_googlemap.erb,其中包含初始化地图的脚本.

这是我的问题.由于地图已经存在,就好像我想要创建两次相同的对象,这当然不起作用并且非常糟糕.我想用新的标记更新地图中的标记.但我找不到办法做到这一点.

我看到之前版本的Gmaps4rails集成了一种方法(Gmaps.map.replaceMarkers(your_markers_json_array);)但它现在似乎不起作用.当我使用它时,我收到此错误：“TypeError：Gmaps.map未定义”.我试过“handler.replaceMarkers();”但这次我有“TypeError：handler.replaceMarkers不是函数”.

我是Javascript和Rails的新手,但我想提高自己的知识,我真的需要继续使用这个Web应用程序的其余部分.我一直在网上寻找解决方案但是徒劳无功.

Live website here

请问,有人可以告诉我我该怎么做以及我做错了什么？

提前谢谢了,

席琳

zones_controller.rb

def search
   respond_to do |format|
     format.html.none do
      search_params = params[:zone][:search]
         coordinates = Geocoder.coordinates(search_params).join(",")
         @zones = Zone.search(
           "",{ "aroundLatLng" => coordinates,"aroundRadius" => 500000  #Searches around 500 km
                })
         if coordinates.nil?
           @zones = Zone.search(params[:search])
         elsif @zones.empty?
           @zones = Zone.all
           flash[:error] = "No zone could be found. Please try again."
         end
       build_map(@zones)
     end

     format.js
   end
end

def build_map(array)
  @hash = Gmaps4rails.build_markers(array) do |zone,marker|
    marker.lat zone.latitude
    marker.lng zone.longitude
    marker.json({ title: zone.description,id: zone.id })
    marker.infowindow render_to_string(:partial => "/zones/map_box",locals: { zone: zone })
  end
end

search.html.erb

<div id="map" style='width: 100%; height: 700px;'>
</div>
  <!-- Beginning Google maps -->

<script type="text/javascript" id="map_script">
   $(document).ready(function() {
     <%= render 'googlemap',hash: @hash %>
   }); // Document ready
</script>

_googlemap.erb

handler = Gmaps.build('Google');
handler.buildMap({ provider: {
    disableDefaultUI: true,mapTypeId: google.maps.MapTypeId.TERRAIN
  },internal: {id: 'map'}
},function(){
  markers_json = <%= raw hash.to_json %>;
  markers = _.map(markers_json,function(marker_json){

    marker = handler.addMarker(marker_json);
    handler.getMap().setZoom(4);

    _.extend(marker,marker_json);

    marker.infowindow = new google.maps.InfoWindow({
      content: marker.infowindow
    });

    return marker;
  });

  handler.bounds.extendWith(markers);
  handler.fitMapToBounds();
});

search.js.erb

$('#map_script').replaceWith("<%= render 'googlemap',hash: @hash %>");