2

ユーザーがショップを作成できるRails3.2アプリがあり、ユーザーにショップを地図上に配置してもらいたいです。gmaps4rails gemを試し、デフォルトの構成を使用して機能させました。ユーザーが入力したアドレスを座標に変換し、地図上にマーカーを表示します。ただし、変換プロセスの精度に一貫性がないことがわかりました。ユーザーが自分のマーカーを地図上にドロップできるようにすることを好みます。

これは、gemのreadmeに従った後の私のコードです。

# 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>

問題：

  • マップをクリックしても、既存のマーカーはクリアされません。しかし、それは新しいマーカーを与えます。
  • 送信ボタンをクリックしても、新しいマーカーの新しい位置を反映するように緯度と経度が更新されません。古いものを使うだけです。

アップデート

「マーカー位置の更新」部分を機能させることができましたが、フォームでマップをクリックしても既存のマーカーがクリアされませんでした。表示ページの結果には、更新されたマーカーのみが表示されます。これはすばらしいことです。

更新されたコードは次のとおりです。

# 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());
}
...
4

1 に答える 1

1

単純に置き換える必要があると思います：

markersArray[i].setMap(null);

と：

markersArray[i].serviceObject.setMap(null);
于 2012-07-21T22:34:27.990 に答える