我想使用Ajax来避免刷新页面.所以我添加了remote：true表单,控制器中的respond_to和新的search.js.erb.我的search.js.erb呈现了部分_googlemap.erb,其中包含初始化地图的脚本.
这是我的问题.由于地图已经存在,就好像我想要创建两次相同的对象,这当然不起作用并且非常糟糕.我想用新的标记更新地图中的标记.但我找不到办法做到这一点.
我看到之前版本的Gmaps4rails集成了一种方法(Gmaps.map.replaceMarkers(your_markers_json_array);)但它现在似乎不起作用.当我使用它时,我收到此错误：“TypeError：Gmaps.map未定义”.我试过“handler.replaceMarkers();”但这次我有“TypeError：handler.replaceMarkers不是函数”.
我是Javascript和Rails的新手,但我想提高自己的知识,我真的需要继续使用这个Web应用程序的其余部分.我一直在网上寻找解决方案但是徒劳无功.
请问,有人可以告诉我我该怎么做以及我做错了什么？
提前谢谢了,
席琳
zones_controller.rb
def search
respond_to do |format|
format.html.none do
search_params = params[:zone][:search]
coordinates = Geocoder.coordinates(search_params).join(",")
@zones = Zone.search(
"",{ "aroundLatLng" => coordinates,"aroundRadius" => 500000 #Searches around 500 km
})
if coordinates.nil?
@zones = Zone.search(params[:search])
elsif @zones.empty?
@zones = Zone.all
flash[:error] = "No zone could be found. Please try again."
end
build_map(@zones)
end
format.js
end
end
def build_map(array)
@hash = Gmaps4rails.build_markers(array) do |zone,marker|
marker.lat zone.latitude
marker.lng zone.longitude
marker.json({ title: zone.description,id: zone.id })
marker.infowindow render_to_string(:partial => "/zones/map_Box",locals: { zone: zone })
end
end
search.html.erb
<div id="map" style='width: 100%; height: 700px;'>
</div>
<!-- Beginning Google maps -->
<script type="text/javascript" id="map_script">
$(document).ready(function() {
<%= render 'googlemap',hash: @hash %>
}); // Document ready
</script>
_googlemap.erb
handler = Gmaps.build('Google');
handler.buildMap({ provider: {
disableDefaultUI: true,mapTypeId: google.maps.MapTypeId.TERRAIN
},internal: {id: 'map'}
},function(){
markers_json = <%= raw hash.to_json %>;
markers = _.map(markers_json,function(marker_json){
marker = handler.addMarker(marker_json);
handler.getMap().setZoom(4);
_.extend(marker,marker_json);
marker.infowindow = new google.maps.InfoWindow({
content: marker.infowindow
});
return marker;
});
handler.bounds.extendWith(markers);
handler.fitMapToBounds();
});
search.js.erb
$('#map_script').replaceWith("<%= render 'googlemap',hash: @hash %>");
解决方法
我没有验证该方法,但我想它应该工作并且更有效：
创建app / assets / javascript / map.js文件.您可以在那里存储与地图相关的功能.创建一个函数来更新此文件中的地图标记：
map.js
(function() {
/* __markers will hold a reference to all markers currently shown
on the map,as GMaps4Rails won't do it for you.
This won't pollute the global window object because we're nested
in a "self-executed" anonymous function */
var __markers;
function updateMarkers(map,markersData)
{
// Remove current markers
map.removeMarkers(__markers);
// Add each marker to the map according to received data
__markers = _.map(markersData,function(markerJSON) {
marker = map.addMarker(markerJSON);
map.getMap().setZoom(4); // Not sure this should be in this iterator!
_.extend(marker,markerJSON);
marker.infowindow = new google.maps.InfoWindow({
content: marker.infowindow
});
return marker;
});
map.bounds.extendWith(__markers);
map.fitMapToBounds();
};
// "Publish" our method on window. You should probably have your own namespace
window.updateMarkers = updateMarkers;
})();
此功能可用于初始化地图并进行更新.由于您不会(如果我的回答满足您)将地图渲染两次,您可以删除_google_map.erb并将其内容放回search.html.erb,但使用我们刚刚创建的函数：
search.html.erb
<div id="map" style='width: 100%; height: 700px;'>
</div>
<!-- Beginning Google maps -->
<script type="text/javascript" id="map_script">
$(document).ready(function() {
mapHandler = Gmaps.build('Google');
mapHandler.buildMap({ provider: {
disableDefaultUI: true,mapTypeId: google.maps.MapTypeId.TERRAIN
},internal: {id: 'map'}
},function(){
var markersData = <%= raw @hash.to_json %>;
updateMarkers(mapHandler,markersData);
});
}); // Document ready
</script>
在声明变量时请不要忘记var关键字,否则它们最终会成为全局变量,而这很糟糕^^
请注意,我故意将mapHandler作为全局变量：当有人使用搜索时,您需要访问处理程序以更新标记.这可能不是一个理想的事情,但这个问题不是重构你的代码所以让我们保持这种方式.
所以现在我的解决方案为您提供了一个在页面加载时使用给定标记初始化的地图.换句话说,一切都没有改变！
但是,您现在可以重复使用此updateMarkers函数来更改地图上显示的标记.这就是你search.js.erb脚本应该做的事情：
search.js.erb
(function() {
var markersData = <%= raw @hash.to_json %>;
updateMarkers(mapHandler,markersData);
})();
而已！希望它能带你进入你项目的下一步:)