Mapbox 地图未显示 Rails
Mapbox Map not showing up with Rails
我正在尝试使用 Mapbox 将地图添加到 rails 个页面之一。我完全按照 Mapbox.js 页面上所述的文档操作,但该页面无法显示在我的页面上。
这是我的 map。
这是我 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>
这是 application.html.erb 页面中的 header:
<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>
在 Mapbox 网站上查看这个基本示例:https://www.mapbox.com/mapbox.js/example/v1.0.0/
我正在尝试使用 Mapbox 将地图添加到 rails 个页面之一。我完全按照 Mapbox.js 页面上所述的文档操作,但该页面无法显示在我的页面上。
这是我的 map。
这是我 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>
这是 application.html.erb 页面中的 header:
<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>
在 Mapbox 网站上查看这个基本示例:https://www.mapbox.com/mapbox.js/example/v1.0.0/