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