2012-07-20 39 views
2

我有一個允許用戶創建商店的Rails 3.2應用程序,並且我希望用戶將他們的商店放在地圖上。我嘗試了gmaps4rails寶石&通過使用默認配置使其工作 - 將用戶輸入的地址轉換爲座標&在地圖上顯示標記。不過,我發現轉換過程的準確性不一致。我更喜歡讓用戶在地圖上放下自己的標記。gmaps4rails - 在表單中放置新標記時,現有標記不會被清除

這是繼創業板的自述後,我的代碼:

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

形式的部分(從寶石的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> 

問題:

  • 當點擊地圖上,現有的標記不會清除d。它確實給了一個新的標記。
  • 當我點擊提交按鈕時,緯度&經度不會更新以反映新標記的新位置。它只是使用舊的。

UPDATE

我設法讓「更新標記位置」的一部分工作,但被點擊的形式映射當現有標記仍未清除。顯示頁面上的結果只顯示更新的標記,這很好。

下面是更新後的代碼:

# 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

我想你應該簡單地替換:

markersArray[i].setMap(null); 

有了:

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

隨着'markersArray [I] .setMap(NULL); ' - 當我瀏覽器中的編輯窗體時,它會顯示當前標記。點擊地圖給我一個新的標記,但不會刪除舊的標記。在地圖上第二次點擊會替換「新」標記,但仍不會刪除「舊」標記。但是使用'markersArray [i] .serviceObject.setMap(null);'它會禁用第二次單擊地圖以清除「新」標記。 – 2012-07-23 16:24:02

+0

我也在這個相同的點 – adamteale 2012-07-26 18:50:47

+0

我目前正在重寫寶石的js部分,我應該澄清很多事情。 – apneadiving 2012-07-26 18:51:57