【问题标题】:gmap4rails worked locally but doesn't show on herokugmap4rails 在本地工作,但在 heroku 上没有显示
【发布时间】:2016-05-13 21:17:44
【问题描述】:

我在将地图加载到 heroku 时遇到问题,地图在本地运行良好,但是当我在 heroku 上测试时,Web 控制台说错误是 buildMap is not define

错误与此行有关buildMap(<%=raw @hash.to_json %>);

这是我的看法:

<script src="//maps.google.com/maps/api/js?v=3.23&sensor=false&client=&key=&libraries=geometry&language=&hl=&region=" type="text/javascript"></script> 
<script src="//cdn.rawgit.com/mahnunchik/markerclustererplus/master/dist/markerclusterer.min.js" type="text/javascript"></script>
<script src='//cdn.rawgit.com/printercu/google-maps-utility-library-v3-read-only/master/infobox/src/infobox_packed.js' type='text/javascript'></script> <!-- only if you need custom infoboxes -->
<script src='//cdn.rawgit.com/googlemaps/js-rich-marker/gh-pages/src/richmarker-compiled.js' type='text/javascript'></script>
<script src='//cdn.rawgit.com/printercu/google-maps-utility-library-v3-read-only/master/infobox/src/infobox_packed.js' type='text/javascript'></script>

<% if customer_signed_in? %>
   <nav class="navbar navbar-inverse">
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <%= link_to "Discount Now", dashboard_path, class: "navbar-brand", id: "logo" %>
    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
        <li> <%= link_to "Home", dashboard_path %> </li>
        <li> <%= link_to "edit profile", edit_customer_registration_path %></li>
      </ul>

      <ul class="nav navbar-nav navbar-right">
      <li>Signed in as <%= current_customer.email %></li>
        <li><%= link_to "log out", destroy_customer_session_path,:method => :delete, id: "nav-login-button", type: "button", class: "btn btn-primary navbar-btn"%></li>
      </ul>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>


<%= form_tag dashboard_path, :method => :get do %>
<div class= "row">
  <p>
    <%= text_field_tag :search, params[:search], class: "col-md-4"%>
    <%= submit_tag "Search Near", class: "btn btn-info", :name => nil  %>
  </p>
  </div>
<% end %>

<div style='width: 800px;'>
  <div id="map" style='width: 900px; height: 500px;'></div>
</div>

<script type="text/javascript">
  buildMap(<%=raw @hash.to_json %>);

</script>
<%else %>
 <% link_to "sign up", new_customer_session_path%>
<% end %>

以及我构建地图的咖啡脚本:

class RichMarkerBuilder extends Gmaps.Google.Builders.Marker #inherit from builtin builder

  # override method
  create_infowindow: ->
    return null unless _.isString @args.infowindow

    boxText = document.createElement("div")
    boxText.setAttribute("class", 'white') #to customize
    boxText.innerHTML = @args.infowindow
    #boxText.outerHTML = @args.title
    @infowindow = new InfoBox(@infobox(boxText))

    @bind_infowindow() 

  infobox: (boxText)->
    content: boxText
    pixelOffset: new google.maps.Size(-140, 0)
    boxStyle:
      width: "280px"

@buildMap = (markers)-> 
  handler = Gmaps.build 'Google', { builders: { Marker: RichMarkerBuilder} } #dependency injection

  #then standard use
  handler.buildMap { provider: {}, internal: {id: 'map'} }, ->
    markers = handler.addMarkers(markers)
    handler.bounds.extendWith(markers)
    handler.fitMapToBounds()
    handler.bounds.extendWith markers

这是我的 application.html.erb 文件

<!DOCTYPE html>
<html>
<head>
  <title>CS160</title>
  <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track' => true %>
  <%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
  <%= csrf_meta_tags %>
</head>
<body>
<%= yield %>
<%= yield :javascript %>
</body>
</html>

所以我确实把yield: javascript 放在javascript_include_tag 之后,所以我不确定问题是什么

【问题讨论】:

    标签: javascript ruby-on-rails ruby coffeescript gmaps4rails


    【解决方案1】:

    buildMap(&lt;%=raw @hash.to_json %&gt;); 可能在文档完成加载和所有 Javascript 文件加载之前被调用。尝试包装在 document.ready 函数中:

    $(document).ready(function() {
      buildMap(<%=raw @hash.to_json %>);
    });
    

    否则,定义RichMarkerBuilder 的coffeescript 文件没有被正确编译到您在Heroku 上的资产中。你可以从控制台运行buildMap({}) 吗?如果没有,您需要确保使用资产管道正确编译您的 JS 文件。

    【讨论】:

    • 是的,我可以从控制台运行 buildMap({}),看来 buildMap({}) 包含一些值搜索,如纬度和经度,但地图没有显示
    • 和正确加载到服务器的coffescript脚本,我刚刚检查过它在服务器上,并将buildmap包含在document.ready中也没有帮助,所以我不确定问题是什么
    • $( document ).ready(function() { buildMap(&lt;%=raw @hash.to_json %&gt;); }); 这对我有用
    • 是的,抱歉,我忘记了答案中的结尾 )
    • 谢谢,文件准备好不是问题,我只是再次预编译资产并以某种方式解决了问题,我会接受答案
    猜你喜欢
    • 2015-07-25
    • 1970-01-01
    • 2014-01-02
    • 1970-01-01
    • 1970-01-01
    • 2021-04-26
    • 2013-03-29
    • 2015-02-07
    • 2017-08-01
    相关资源
    最近更新 更多