javascript - Rails Leaflet Webpack 空白页-6ren

javascript - Rails Leaflet Webpack 空白页

转载作者：行者123 更新时间：2023-11-28 03:14:39

25

4

这是 related problem 的延续@rossta 修复了部分问题，但现在问题已转移，所以我想重新开始。

没有错误，脚本正在完成(通过脚本中的 console.log 输出进行验证)。 body 元素出现。这适用于 gem leaflet，现在适用于 Rails 5.2 中的 webpack，但现在不适用于 Rails 6 中的 webpack

我将脚本移动到页面中以隔离问题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

需要调试，但我不知道从哪里开始。

最佳答案

我不敢相信这一更改会产生任何影响，但它确实产生了影响。

更改了<div id="map_two"...中的map_two var mapVar = L.map("map_two"...到只是map然后它就加载了。我使用map_two是因为当我之前进行实验时，我认为我使用的两个页面只是 map我们变得很困惑。我也尝试过map-two它也不起作用(不是我所期望的，但我仍然不明白发生了什么。我在更改之间重新启动了服务器，以更确定发生了什么。

关于javascript - Rails Leaflet Webpack 空白页，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/59744187/

25

4

0

文章推荐： javascript - 纯 JS Hangman 中防止重复字母输入的问题

文章推荐： c++ - SFML 中的程序纹理

文章推荐： c++ - 将数组中的所有数字更改为其索引值

文章推荐： c++ - deadline_timer 只等待一次

leaflet - 在折线上创建缓冲区 - Leaflet
我正在尝试实现类似于 Leaflet.buffer 的缓冲区在我的 map 上。然而，Leaflet.buffer 似乎只适用于 Leaflet.Draw。我正在使用 Leaflet Editabl
leaflet - 使用 Leaflet 和 Leaflet.markerclusterer - 如何循环所有标记？
我正试图摆脱 Google map ，因为我受够了他们现在的速度有多慢!我决定试一试 Leaflet，这似乎是个不错的选择。下面是我的代码: initMap(); function initMap()
leaflet - Leaflet 中的点击标记和折线
在 Leaflet 中，是否可以使用 {clickable:false} 定义标记或折线，以便点击传递到下方的任何内容 - 无论是 map 还是可点击的几何对象？目前我通过使标记/折线可点击并自己传
leaflet - 使用 Leaflet 处理数千个标记的最佳实践
我正在结合 Leaflet 使用 HTML map 进行一些测试。 .服务器端我有一个 Ruby Sinatra 应用程序，它提供由 MySQL 表获取的 json 标记。使用 2k-5k 和可能更多
leaflet - 将FeatureGroup转换为GeoJson时，Leaflet Draw不采用属性
我无法使用Leaflet(0.7.7)/Leaflet.Draw(latest)将Layer属性转换为GEOJson对象的属性。我的工作流程是: 1创建 map :var map = L.map('#
leaflet - 如何在折线上应用 css : leaflet
我正在使用使用传单 api 的应用程序。简介我需要绘制不同类型的围栏，使用装饰器我可以在一定程度上为折线应用良好的视觉效果，但不多。问题我愿意显示双绞线而不是破折号、点或普通线，我知道双绞线将
leaflet - 更改 Leaflet 属性控制位置
我在我的应用程序中使用 WebView 来显示 Leaflet map 。在 HTML 文件中，我有以下信用和链接: L.tileLayer('https://api.tiles.mapbox.co
leaflet - Leaflet.draw在draw:edited事件上检索图层类型
我正在使用https://github.com/Leaflet/Leaflet.draw插件，并且试图检索已编辑图层的图层类型。在draw:created事件中，我有layer和layerType，
leaflet - 如何使 Leaflet 控件水平堆叠而不是垂直堆叠？
我的左下角有缩放控件和比例尺。我遇到的问题是，当我的 map 在移动设备上旋转时，它们与左上角的自定义控制面板重叠。那么如何使比例尺水平位于缩放控件旁边？最佳答案您可以通过更改比例控件的 CS
leaflet - 使用 Leaflet 计算海拔高度
我想计算标记的高度，但我在传单中没有找到任何解决方案。我找到了海拔插件，它允许在 map 上绘制海拔剖面图，但我不需要它。你知道如何计算高度吗？谢谢。最佳答案编辑:一个不错的选择为任何可能需要它
leaflet - leaflet Marker和mapbox featureLayer的区别
我明白我可以使用通用Leaflet layer ，以及更高级的 map 框 featureLayer ，它提供了作为过滤器的有用功能。但是，我不明白两者之间的区别 marker = L.Marker
react-leaflet - 使用 TypeScript 的 react-leaflet 中的 mapbox-gl-leaflet？
我正在尝试在 Render mapbox vector tiles inside react-leaflet? 中描述此实现工作，除了我使用的是 TypeScript。所以我的文件看起来像这样: i
leaflet - 在 Leaflet 上将点转换为 LatLng
我正在尝试将我的点在 map 上的正确位置作为 Latlng: let point = L.point(0,0) // x=0,y=0 let latlng = map.unproject(point
leaflet - 如何在 Leaflet 中为磁贴请求添加自定义授权 header
我正在使用 Leaflet.VectorGrid用于在传单 map 上加载 pbf 矢量切片的插件。我检索矢量切片的 API 需要传递授权 header 。在 Mapbox GL js 中，这可以通过
leaflet - 使用 Leaflet.js，如何遍历集群中的标记？
我们有一张 map ，在某个缩放级别，我们开始对标记进行聚类。现在我希望能够删除某些标记。我可以删除不参与集群的标记，但集群中的标记不会被删除，因为代码不会遍历它们。我会发布代码，但它无处不在，而
leaflet.markercluster - Leaflet markercluster - 点击放大然后spiderfy
我仅在同一位置的标记上进行聚类(即 maxClusterRadius = 0)。单击集群时，我希望它以特定的缩放级别(不是最大缩放)居中并放大，然后立即 spiderfy。使用以下代码，spiderf
leaflet - 以编程方式删除 Leaflet overlayMaps 层
使用 Leaflet javascript。我希望我的“清除按钮”能做两件事... 1) 取消选中所有 L.Control 层2) 从 map 中移除当前叠加层我可以使用这段代码轻松完成第一个: v
leaflet - 自定义 Leaflet map 上标记的聚类
我正在开发一个包含大量标记的应用程序，并希望将它们聚类。我找到了 Leaflet.markercluster，它做得很好。但是，我想自定义标记的聚类。具体来说，我想根据标记所在的国家/地区对我的标记进
leaflet - 使用 Leaflet.js 在一个点周围添加一个设定大小的正方形多边形
有点奇怪，希望有人能帮忙。在传单中，一旦用户输入了纬度/经度并向 map 添加了一个点，我希望能够在该点周围添加一个 10 公里的正方形。我已经尝试四处寻找计算以找到 x 公里外的正方形的角，但没
leaflet - 如何在 leaflet.js 中切换初始层可见性
我在 leaflet.js 中创建了一个具有多个图层的 map ，但无法弄清楚如何切换一个图层以最初显示在 map 上。 Here is the link 我确信它相当简单，但就是无法弄清楚。最佳答

首页

博学

6Ren·AI

商城

javascript - Rails Leaflet Webpack 空白页