[英]Gmaps4rails: map does not show through ajax with erb data feeding but does when hard coded
我想使用gmaps4rails gem在fancybox中顯示項目地圖。 我認真地遵循了wiki上有關ajax調用的說明,即腳本必須手動包含在應用程序布局中,地圖必須以javascript加載( 請參見gem wiki )。
但我仍然無法完全使地圖顯示在框中。
另一方面,當我在javascript中對代碼進行硬編碼時,它工作正常,地圖顯示在了花式框中,並且出現了標記。
讓我回顧一下。
在我的索引視圖中,我對項目index動作進行了ajax調用:
<%= link_to "Show Map", items_path(:format => :js, :show_map => true), :remote => true, :class => 'fancybox' %>
在控制器中,我填充了地圖數據:
def index
@items=Item.all
if params[:show_map]
@map= @items.to_gmaps4rails
end
end
在index.js.erb文件中,我將
<% if params[:show_map] %>
var content = "<%= escape_javascript( gmaps({:last_map => false})) %>";
$.fancybox({
'content': content,
'padding' : 20
});
Gmaps.map = new Gmaps4RailsGoogle();
Gmaps.load_map = function() {
Gmaps.map.initialize();
Gmaps.map.markers = <%= @map %>;
Gmaps.map.create_markers();
Gmaps.map.adjustMapToBounds();
Gmaps.map.callback();
};
Gmaps.loadMaps();
<% else %>
// blablabla
<% end %>
在地圖對象中提供標記的位置。
這不起作用,代碼我自己出現在fancybox中,而不是我的地圖。 就像是:
var content = "\n
\n
<\/div>\n<\/div>\n"; $.fancybox({ 'content': content, 'padding' : 20 }); Gmaps.map = new Gmaps4RailsGoogle(); Gmaps.load_map = function() {Gmaps.map.initialize();
//Gmaps.map.markers = [{"lat":50.294,"lng":5.857},{"lat":50.294,"lng":5.857},{"lat":50.548,"lng":4.918},{"lat":50.384,"lng":3.649},{"lat":50.384,"lng":3.649},{"lat":50.08,"lng":4.5760000000000005},{"lat":50.054,"lng":5.195}];
Gmaps.map.markers = [{"lat":50.8483059,"lng":4.351783999999999},{"lat":50.496,"lng":5.066},{"lat":50.11,"lng":5.003},{"lat":50.11,"lng":5.003},{"lat":50.162,"lng":5.871},{"lat":50.08,"lng":4.5760000000000005},{"lat":50.08,"lng":4.5760000000000005},{"lat":50.08,"lng":4.5760000000000005}];
Gmaps.map.create_markers(); Gmaps.map.adjustMapToBounds(); Gmaps.map.callback(); }; Gmaps.loadMaps();
當代替erb <%= @map %>
,我對標記進行了硬編碼,例如:
Gmaps.map.markers = [{"lat":50.294,"lng":5.857},"lat":50.294,"lng":5.857},{"lat":50.548,"lng":4.918}];
有用!
似乎我在json數據類型轉換中缺少某些內容。 但是我不是專家來找出問題所在。
謝謝你的幫助!
剛成功嘗試過:
<a href="#test" class="fancybox">Open</a>
<div id="test" style="display:none;width:300px;">
<%= gmaps markers: { data: @json } , last_map: false %>
</div>
<script type="text/javascript">
$(".fancybox").fancybox({
openEffect : 'none',
closeEffect : 'none',
afterLoad : function() { Gmaps.loadMaps(); }
});
</script>
好的,我遇到了不順利的情況。 感謝以下回答https://stackoverflow.com/a/12219016/1100674 。
當我使用以下語法時:
Gmaps.map.markers = <%= @map%>;
我得到的JSON呈現如下:
Gmaps.map.markers = [{"lat":50.8483059,"lng":4.351783999999999},{"lat":50.11,"lng":5.003},{"lat":50.11,"lng":5.003},{"lat":50.08,"lng":4.5760000000000005},{"lat":50.08,"lng":4.5760000000000005},{"lat":50.08,"lng":4.5760000000000005},{"lat":50.413,"lng":4.371}];
而我使用raw()
方法,
Gmaps.map.markers = <%= raw(@map)%>;
我得到正確的格式。
Gmaps.map.markers = [{"lat":50.8483059,"lng":4.351783999999999},{"lat":50.11,"lng":5.003},{"lat":50.11,"lng":5.003},{"lat":50.08,"lng":4.5760000000000005},{"lat":50.08,"lng":4.5760000000000005},{"lat":50.08,"lng":4.5760000000000005},{"lat":50.413,"lng":4.371}];
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.