紅寶石在軌道上：傳單軌未加載

我正在嘗試使用leaflet-rails gem。我跟着GitHub的頁面中列出的步驟，但是當我嘗試加載地圖，我看到

ReferenceError: L is not defined

在瀏覽器控制檯。這顯然意味着來自該寶石的助手正在被加載並執行，但它無法找到leaflet.js文件。

但是，頁面的頭部分顯示/assets/leaflet.js正在被引用，它實際上是在那裏。

當我看到生成的代碼：

<div id="map"></div> 
    <script> 
    var map = L.map('map') 
    map.setView([-54.0, 6.08], 16) 
    L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', { 
       attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors', 
       maxZoom: 18, 
    subdomains: '', 
    }).addTo(map) 
    </script> 
    </div> 
    <script src="/assets/jquery.js?body=1" data-turbolinks-track="true"></script> 
    <!-- all the other scripts loaded --> 
    <script src="/assets/exif.js?body=1" data-turbolinks-track="true"></script> 
    <script src="/assets/leaflet.js?body=1" data-turbolinks-track="true"></script> 
    <!-- some more scripts -->

所以創業板增加了一個腳本正下方的地圖格，只有到那時，由於鏈輪機制和所有的其他腳本加載。對我來說，這看起來很明顯，腳本無法加載leaflet.js，因爲它之後被引用爲！

因此，我誤解了RoR如何處理寶石和JavaScripts的東西？它必須在某個時候被工作...

這裏是我的/app/assets/javascript/application.js：

//= require jquery 
//= require jquery.ui.widget 

// Here I load a whole bunch of javascripts which are related to jquery-fileupload, cut for brevity 
//= require bootstrap.min 
//= require bootbox.min 
//= require bootstrap-datepicker 

//= require exif 
//= require leaflet 

//= require turbolinks 
//= require_tree .

來源

2014-12-05 faboolous

原來這是也許有些RoR的具體問題。

很多網站建議把它加載JavaScript的，在文件的結尾

<%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>

線，以加快頁面顯示。用leaflet-rails寶石，這不是很好，並會產生上述問題。如果將同一行放在<head>部分，問題就會消失...

P.S.我仍然有寶石的問題，雖然，現在我得到

Error: No value provided for variable {s}

如果我取代「http://{s}.tile.osm.org/{z}/{x}/{y}.png」與「http://a.tile.osm.org/{z}/{x}/{y}.png"它的工作原理......不認爲它的意思是工作，但這樣...但是這是一個不同的問題...

來源

2014-12-09 14:19:51 faboolous

我在軌面臨着同樣的問題。

傳單工作在發展模式（涼亭管理）
在生產模式Can't find variable L

以下步驟沒有幫助。

asset "leaflet"（Bowerfile）
//= require leaflet/dist/leaflet.js（的application.js）
*= require leaflet/dist/leaflet.css（應用。CSS）
Rails.application.config.assets.precompile += ['leaflet/dist/leaflet.js', 'leaflet/dist/leaflet.css']
資產預編譯，並上傳到生產public/assets/...

我仍然失去了一些東西？

[解決方案]

這個問題可以通過使用單張推薦CDN資產http://leafletjs.com/examples/quick-start/

<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" />
<script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>

但是可以解決，我寧願使用本地緩存的預編譯資產綁定在我的應用服務器上，而不是依賴公共CDN，網絡帶寬hs，以及更多的外部事物。

來源

2016-11-20 06:39:57 ramonrails

紅寶石在軌道上：傳單軌未加載

回答

相關問題