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());
}
...
隨着'markersArray [I] .setMap(NULL); ' - 當我瀏覽器中的編輯窗體時,它會顯示當前標記。點擊地圖給我一個新的標記,但不會刪除舊的標記。在地圖上第二次點擊會替換「新」標記,但仍不會刪除「舊」標記。但是使用'markersArray [i] .serviceObject.setMap(null);'它會禁用第二次單擊地圖以清除「新」標記。 – 2012-07-23 16:24:02
我也在這個相同的點 – adamteale 2012-07-26 18:50:47
我目前正在重寫寶石的js部分,我應該澄清很多事情。 – apneadiving 2012-07-26 18:51:57