ruby-on-rails - Gmaps4rails：地图不会通过带有erb数据馈送的ajax显示，但在硬编码时会显示

Question

我想使用 gmaps4rails gem 来显示一个fancybox 中的项目地图。我仔细阅读了wiki 上关于ajax 调用的注释，即脚本必须手动包含在应用程序布局中，地图必须加载到javascript 中（参见gem wiki）。

但是我仍然没有完全成功地使地图显示在框中。

另一方面，当我在 javascript 中硬编码坐标时，它工作正常，地图显示在幻想框中，并且出现标记。

让我回顾一下。

在我的索引视图中，我有一个对项目索引操作的 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 数据类型转换中遗漏了一些东西。但我不是专家，无法找出问题所在。

谢谢你的帮助！

Answer 1

刚刚尝试成功：

<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>

Answer 2

好吧，我有什么不顺利。感谢以下答案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}];