Javascript Mapbox地图未与Rails一起显示_Javascript_Ruby On Rails_Ruby_Mapbox

Javascript Mapbox地图未与Rails一起显示

javascript ruby-on-rails ruby mapbox

Javascript Mapbox地图未与Rails一起显示,javascript,ruby-on-rails,ruby,mapbox,Javascript,Ruby On Rails,Ruby,Mapbox,我正在尝试使用Mapbox向其中一个rails页面添加地图。我完全按照页面上的说明遵循文档，但是页面没有显示在我的页面上这是我的这是我的index.html.erb页面上的代码： <div class="properties-results"> <h1>Recent Sales Near <%= params[:search] %></h1> <div id='map'></div> <script> L.

我正在尝试使用Mapbox向其中一个rails页面添加地图。我完全按照页面上的说明遵循文档，但是页面没有显示在我的页面上

这是我的

这是我的index.html.erb页面上的代码：

<div class="properties-results">
<h1>Recent Sales Near <%= params[:search] %></h1>

<div id='map'></div>
<script>
L.mapbox.accessToken = 'pk.eyJ1IjoibW9yYWxlczI1NyIsImEiOiJjaWpybXdsMWMwY2tndG9tNXB5ajFhbjE3In0.whDnBZvQN5wQ5bwvtw2fBw';
L.mapbox.map('map', 'morales257.opbj9hf9').setView([-79.392524,43.654967], 5);

</script>
<ul>
  <% @comps.each do |comparable|%>
  <li><%= comparable.street %></li>
  <i> <%= comparable.sold_price%></i>
  <% end %>
</ul>



</div>

<head>
  <title>Workspace</title>

<script src='https://api.tiles.mapbox.com/mapbox.js/v2.2.4/mapbox.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox.js/v2.2.4/mapbox.css' rel='stylesheet' />
  <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track' => true %>
  <%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
  <%= csrf_meta_tags %>
</head>


近期销售额接近
L.mapbox.accessToken='pk.eyj1ijoibw9yywxlczi1nyismeijoijjawpyxdsmwy2tndg9tnxb5ajfhbj3in0.whdnbzvqn5wq5wq5bwvtw2fw'；
L.mapbox.map（'map'，'morales257.opbj9hf9'）.setView（[-79.392524,43.654967]，5）；

这是application.html.erb页面中的标题：

<div class="properties-results">
<h1>Recent Sales Near <%= params[:search] %></h1>

<div id='map'></div>
<script>
L.mapbox.accessToken = 'pk.eyJ1IjoibW9yYWxlczI1NyIsImEiOiJjaWpybXdsMWMwY2tndG9tNXB5ajFhbjE3In0.whDnBZvQN5wQ5bwvtw2fBw';
L.mapbox.map('map', 'morales257.opbj9hf9').setView([-79.392524,43.654967], 5);

</script>
<ul>
  <% @comps.each do |comparable|%>
  <li><%= comparable.street %></li>
  <i> <%= comparable.sold_price%></i>
  <% end %>
</ul>



</div>

<head>
  <title>Workspace</title>

<script src='https://api.tiles.mapbox.com/mapbox.js/v2.2.4/mapbox.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox.js/v2.2.4/mapbox.css' rel='stylesheet' />
  <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track' => true %>
  <%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
  <%= csrf_meta_tags %>
</head>


工作空间
正确%>
正确%>

据我所知，这至少足以在页面上显示一张地图，但什么也没有出现

如果您熟悉Mapbox和Rails，将非常感谢您的帮助

不熟悉Rails，但据我所知，您的代码看起来还不错。唯一缺少的是地图包含元素的CSS规则，它可以解释地图不可见而不会向控制台抛出任何错误：

<style>
    body {
        margin: 0;
        padding: 0;
    }
    #map {
        position: absolute;
        top: 0;
        bottom: 0;
        width: 100%;
    }
</style>


身体{
保证金：0；
填充：0；
}
#地图{
位置：绝对位置；
排名：0；
底部：0；
宽度：100%；
}

请参见Mapbox站点上的这个基本示例：

不熟悉Rails，但就我所见，您的代码看起来不错。唯一缺少的是地图包含元素的CSS规则，它可以解释地图不可见而不会向控制台抛出任何错误：

<style>
    body {
        margin: 0;
        padding: 0;
    }
    #map {
        position: absolute;
        top: 0;
        bottom: 0;
        width: 100%;
    }
</style>


身体{
保证金：0；
填充：0；
}
#地图{
位置：绝对位置；
排名：0；
底部：0；
宽度：100%；
}

请参见Mapbox网站上的这个基本示例：

谢谢iH8！真不敢相信这是一件如此简单的事情，就像错过了CSSAB一样，根本不需要感谢，这就是为什么。然而，您可以考虑将答案标记为“接受”，以便其他具有类似问题的用户也可以找到一个被接受的/有效的答案。看：是的，小事情很重要。正如他们所说的那样，细节才是关键谢谢你！真不敢相信这是一件如此简单的事情，就像错过了CSSAB一样，根本不需要感谢，这就是为什么。然而，您可以考虑将答案标记为“接受”，以便其他具有类似问题的用户也可以找到一个被接受的/有效的答案。看：是的，小事情很重要。正如他们所说的那样，细节才是关键