0

我在 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 &copy; <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（刷新），我就会有一个空白页。

谢谢您的帮助。

4

0 回答 0