Rails Leaflet Webpack 空白頁

Question

這是@rossta 修復部分相關問題的延續，但現在問題已轉移，所以我想我會重新開始。

沒有錯誤並且腳本正在完成（通過腳本中的 console.log 輸出驗證）。 body 元素出現。 這適用於 gem 傳單，現在在 Rails 5.2 中使用 webpack，但現在在使用 webpack 的 Rails 6 中不行

我把腳本移到頁面中隔離問題map/index.html.erb

<p id="notice"><%= notice %></p>
<% provide(:title, 'Map') %>
<h4>This is map/index.html.erb and is put in layouts/map.html.erb.</h4>
  <div id="map_two" class="map clearfix"></div>   -->
  <script>
    function makeMapTwo() {

    console.log('Hello from makeMapTwo in map/index.html.erb')
        var mapVar = L.map("map_two", { center: [34.040951, -118.258579], zoom: 13 });
        L.tileLayer('https://crores.s3.amazonaws.com/tiles/bkm/{z}/{x}/{y}.png').addTo(mapVar);

        $.getJSON("line_data.geojson", function (data_data) {
          var timelineData = L.timeline(data_data, {
            style: function(data_data){
              return {
                stroke: true,
                fillOpacity: 0.5
              }
              }, // end style: function(data_data)
            waitToUpdateMap: true,
            onEachFeature: function(data_data, layer) {
              layer.bindTooltip(data_data.properties.popup, { direction: 'top' } );
            } // onEachFeature:
          }); // end let timelineData = L.timeline
          var timelineControl = L.timelineSliderControl({
            enableKeyboardControls: true,
            steps: 100,
            start: 1885,
            end: 1928,
          });
          timelineData.addTo(mapVar); 
          timelineControl.addTo(mapVar);
          timelineControl.addTimelines(timelineData);
          }); //  end $.getJSON
        }; // end function makeMapTwo()

    $(document).ready(function() {
      makeMapTwo();
    });
  </script>

views/layouts/map.html.erb

<!DOCTYPE html>
<html>
  <head>
    <title><%= full_title(yield(:title)) %></title>
    <h6>This is layouts/map.html.erb. A note to remind me that header is happening twice in maps TODO</h6>
    <%= favicon_link_tag 'favicon.ico' %>
     <%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload', 'data-turbolinks-suppress-warning': true %>
    <%= stylesheet_pack_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
     <style> 
       .map {
         height: 400px;
         width: 100%
       }
     </style>
     <%= csrf_meta_tags %>
  </head>
    <%= render 'layouts/header' %> <!-- the navbar -->
  <body class="container" data-mapbox-token="<%= ENV['MAPBOX_TOKEN'] %>">
    <%= yield %>
    <%= render 'layouts/footer' %>
  </body>
</html>

和app/javascript/packs/application.js ：

import "core-js/stable"
import "regenerator-runtime/runtime"
import '../stylesheets/application'
window.jQuery = $
window.$      = $
import 'leaflet'
import "leaflet.timeline"
require("@rails/ujs").start()
require("turbolinks").start()
require("@rails/activestorage").start()
require("trix")
require("@rails/actiontext")
require("jquery") 
import "bootstrap"
import 'bootstrap/dist/js/bootstrap'

document.addEventListener("turbolinks:load", () => {
  $('[data-toggle="tooltip"]').tooltip()
  $('[data-toggle="popover"]').popover()
})

config/webpack/environment.js ：

const { environment } = require('@rails/webpacker')
const webpack = require('webpack')

environment.plugins.append('Provide',
  new webpack.ProvidePlugin({
    $: 'jquery',
    jQuery: 'jquery',
    jquery: 'jquery',
    Popper: ['popper.js' ,'default'],
  }))

module.exports = environment

package.json

const { environment } = require('@rails/webpacker')
const webpack = require('webpack')

environment.plugins.append('Provide',
  new webpack.ProvidePlugin({
    $: 'jquery',
    jQuery: 'jquery',
    jquery: 'jquery',
    Popper: ['popper.js' ,'default'],
  }))

module.exports = environment

需要調試，但我不知道從哪里開始。

Answer 1

我不敢相信這種變化有任何影響，但確實如此。

將<div id="map_two"... var mapVar = L.map("map_two"...為僅map並加載。我使用的是 map_two 因為當我之前進行實驗時，我認為這兩個頁面我只是使用map感到困惑。我也嘗試了map-two並且它也不起作用（不是我所期望的，但我仍然不明白發生了什么。我在更改之間重新啟動了服務器更加確定發生了什么。

Rails Leaflet Webpack 空白頁

問題描述

1 個解決方案

解決方案1
0 2020-01-16 06:11:29

Rails Leaflet Webpack 空白頁

問題描述

1 個解決方案

解決方案1 0 2020-01-16 06:11:29

解決方案1
0 2020-01-16 06:11:29