gmaps4rails - 在表单中删除新标记时,不会清除现有标记

时间:2012-07-20 22:24:42

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

我有一个Rails 3.2应用程序,允许用户创建商店,我希望用户将他们的商店放在地图上。我试过了gmaps4rails宝石&通过使用默认配置使其工作 - 将用户输入的地址转换为坐标&在地图上显示标记。但是我发现转换过程的准确性和准确性不一致。我更喜欢让用户在地图上删除自己的标记。

这是我关注gem自述文件后的代码:

# migration
t.string  "address",  :null => false
t.float   "latitude"
t.float   "longitude"
t.boolean "gmaps"

# model Shop.rb
attr_accessible :name, :address, :latitude, :longitude

acts_as_gmappable

def gmaps4rails_address
  address
end

# shops_controller.rb
def show
  @shop = Shop.find(params[:id])
  @json = Shop.all.to_gmaps4rails
end

def edit
  @shop = Shop.find(params[:id])
  @json = Shop.all.to_gmaps4rails
end

def update
  @shop = Shop.find(params[:id])
  @json = Shop.all.to_gmaps4rails

  if @shop.update_attributes(params[:shop])
    flash[:success] = "Shop's updated."
    redirect_to shop_path(@shop)
  end
end

# view
<%= gmaps4rails(@json) %>

表单部分(从gem的wiki引用):

# _form.html.erb
....
<%= gmaps4rails(@json) %>
<% content_for :scripts do %>
<script type="text/javascript" charset="utf-8">
  var markersArray = [];
  // On click, clear markers, place a new one, update coordinates in the form
  Gmaps.map.callback = function() {
    google.maps.event.addListener(Gmaps.map.serviceObject, 'click', function(event) {
      clearOverlays();
      placeMarker(event.latLng);
      updateFormLocation(event.latLng);
    });
  };
  // Update form attributes with given coordinates
  function updateFormLocation(latLng) {
    $('#shop_attributes_latitude').val(latLng.lat());
    $('#shop_attributes_longitude').val(latLng.lng());
    $('#shop_attributes_gmaps_zoom').val(Gmaps.map.serviceObject.getZoom());
  }
  // Add a marker with an open infowindow
  function placeMarker(latLng) {
    var marker = new google.maps.Marker({
        position: latLng, 
        map: Gmaps.map.serviceObject,
        draggable: true
    });
    markersArray.push(marker);
    // Set and open infowindow
    var infowindow = new google.maps.InfoWindow({
        content: '<div class="popup"><h2>Awesome!</h2><p>Drag me and adjust the zoom level.</p>'
    });
    infowindow.open(Gmaps.map.serviceObject,marker);
    // Listen to drag & drop
    google.maps.event.addListener(marker, 'dragend', function() {
        updateFormLocation(this.getPosition());
    });
  }
  // Removes the overlays from the map
  function clearOverlays() {
    if (markersArray) {
      for (var i = 0; i < markersArray.length; i++ ) {
        markersArray[i].setMap(null);
      }
    }
    markersArray.length = 0;
  }
</script>
  

问题:

  • 在地图上单击时,现有标记不会被清除。它确实给了一个新的标记。
  • 当我点击提交按钮时,纬度&amp;经度未更新以反映新标记的新位置。它只是使用旧的。

更新

我设法让“更新标记位置”部分工作,但在表单中单击地图时仍然不清除现有标记。显示页面上的结果仅显示更新的标记,这很不错。

这是更新后的代码:

# Shop.rb
acts_as_gmappable :process_geocoding => false

# no more def gmaps4rails_address in the model

# controller
def show
  @json = Shop.find(params[:id]).to_gmaps4rails
end

def edit
  @json = Shop.find(params[:id]).to_gmaps4rails
end

def update
  @shop = Shop.find(params[:id])
  # @json = Shop.all.to_gmaps4rails # not needed here
  ...
end

# _form.html.erb
<%= gmaps4rails(@json) %>
<%= f.hidden_field :latitude %>
<%= f.hidden_field :longitude %>
<% content_for :scripts do %>
...
function updateFormLocation(latLng) {
  $('#shop_latitude').val(latLng.lat());
  $('#shop_longitude').val(latLng.lng());
  $('#shop_gmaps_zoom').val(Gmaps.map.serviceObject.getZoom());
}
...

1 个答案:

答案 0 :(得分:1)

我想你应该简单地替换:

markersArray[i].setMap(null);

使用:

markersArray[i].serviceObject.setMap(null);