0

我正在使用来自 AJAX 调用的 JSON 数据来构建 url 并在模式上显示 Google Map API 图像。这意味着我正在使用 jQuery 编辑 innerHTML。去做这个，

为了显示图像，我必须使用 javascript 来引用经度和纬度值并构建链接。

var google_map_url = 'http://maps.googleapis.com/maps/api/staticmap?center=' + data.location.latitude + ',' + data.location.longitude + '&zoom=14&size=400x300&sensor=false';

"<%= escape_javascript(image_tag "+google_map_url+")%>"

问题是我也在使用 escape_javascript 和我的 image_tag（如上所示），这不会生成图片。我的观点只是显示+google_map_url+。

另一个 escape_javascript image_tag 有效，因为我不必将字符串分解为组件："<%= escape_javascript(image_tag photo[:url]) %>"

我该如何解决这个问题，以便在使用 javascript 变量时仍然可以生成图像？

index.html.erb

<div class="body_container">

    <div id="photos_container">
    <% @photos_array.each do |photo| %>

      <%= link_to '#' do %>
        <div class='each_photo_container', id='<%="#{photo[:id]}"%>' >
          <%= image_tag photo[:s_url] %>
        </div>
      <% end %>


    <!-- Load Modal onClick -->
    <script type="text/javascript">
    jQuery(function() {
      $('#<%=photo[:id]%>').click(function (e) {

        //ajax call to fetch photo info

        var fetch_id = '<%=photo[:id]%>';
        var fetch_secret = '<%=photo[:secret]%>';  

        $.ajax({
          type: 'GET',
          url: '/photos/fetch_info',
          dataType: 'json',
          data: { 'id' : fetch_id, 'secret' : fetch_secret },
          success: function(data){

               var google_map_url = 'http://maps.googleapis.com/maps/api/staticmap?center=' + data.location.latitude + ',' + data.location.longitude + '&zoom=14&size=400x300&sensor=false';          

            //edit innerHTML of basic_modal
            $('.basic_modal').html(

              "<div id='googlemap_image'>"+
                "<%= escape_javascript(image_tag " +google_map_url+ ")%>"+
              "</div>" +

              "<div id='modal_image'>"+
                "<%= escape_javascript(image_tag photo[:url]) %>"+
              "</div>"+

              "<div id='modal_photo_info_container'>"+
                 "<div class='modal_photo_attr'>"
                    +data.title+ 
                 "</div>"+ 
                 "<div class='modal_photo_attr'>"+
                    "By: " +data.owner.username+ 
                 "</div>"+ 
                 "<div class='modal_photo_attr'>"
                    +data.location.region._content+ ", " +data.location.country._content+ 
                 "</div>"+
              "</div>"


             );

            //load modal
        $('.basic_modal').modal({
              overlayClose:true
            });

          } //end success: function(result)
        });


        return false;
      });
    });

    </script>


    <% end %>

    <div class="basic_modal">
    </div>

  </div>
</div>

照片控制器.rb

def fetch_info
  @info = flickr.photos.getInfo(:photo_id => params[:id], :secret=> params[:secret])

  respond_to do |format|
    format.json { render :json => @info }
  end
end
4

1 回答 1

0 
"<%= escape_javascript(image_tag " +google_map_url+ ")%>"

如果你像上面这样写，它将被视为如下 

1. "<%= escape_javascript(image_tag "

2.+google_map_url+

 3.  ")%>"

要获得所需的值，请将 [ " ] 内部替换为 [ ' ]，更正的语法应如下所示

"<%= escape_javascript(image_tag ' +google_map_url+ ')%>"
于 2012-09-26T05:18:52.717 回答