我有一个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>
问题:
更新
我设法让“更新标记位置”部分工作,但在表单中单击地图时仍然不清除现有标记。显示页面上的结果仅显示更新的标记,这很不错。
这是更新后的代码:
# 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());
}
...
答案 0 :(得分:1)
我想你应该简单地替换:
markersArray[i].setMap(null);
使用:
markersArray[i].serviceObject.setMap(null);