gpt4 book ai didi

javascript - Rails Leaflet Webpack 空白页

转载 作者:行者123 更新时间:2023-11-28 03:14:39 26 4
gpt4 key购买 nike

这是 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/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com