我在Rails 4应用程序中使用leaflet.js。 我有一个名为fields的页面,我在其中显示了一个地图。页面显示效果很好,但刷新后,渲染结果为空白页。
这是我的javascript代码:
# app/assets/javascript/fields.js.coffee
$(document).ready ->
map = L.map('map')
L.tileLayer("http://{s}.tile.cloudmade.com/my-API-KEY/997/256/{z}/{x}/{y}.png", {
attribution: 'Map data © <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="http://cloudmade.com">CloudMade</a>',
maxZoom: 18
}).addTo(map)
bounds = new L.LatLngBounds
for field in $(".field_in_map")
$field = $(field)
latlng = [$field.data("latitude"), $field.data("longitude")]
bounds.extend(latlng)
desc = $field.data("description")
addr = $field.data("address")
marker = L.marker(latlng).addTo(map)
marker.bindPopup("<a href=#{addr} data-no-turbolink><b>#{desc}</b></a><br>")
map.fitBounds(bounds)
if $(".field_in_map").length==1 && $(".field_in_map").data("zoom")
map.setZoom($(".field_in_map").data("zoom"))
我的索引页:
# app/views/fields/index.html.erb
…
<% @fields.each do |field| %>
<%= content_tag :div, class: "field_in_map", data: { latitude: field.latitude, longitude: field.longitude, description: print_field(field), address: field_path(field) } do %>
<% end %>
<% end %>
<div id="map" class="map_with_all_fields"></div>
…
我的宝石文件:
# Gemfile
…
gem 'leaflet-rails'
…
在我的配置中,我有 config.assets.initialize_on_precompile = false 和 config.serve_static_assets = true 。
在启动服务器之前,我会生成资产:
$> rake assets:precompile
服务器启动后,我访问了字段的索引页面,一切正常。但是一旦我按下CMD + R(刷新),我就会有一个空白页面。
感谢您的帮助。