gpt4 book ai didi

javascript - 传单在 Electron 中翻转瓷砖

转载 作者:行者123 更新时间:2023-11-29 15:14:26 25 4
gpt4 key购买 nike

嘿,我是 Electron 的新手,但我想在其中使用 Leaflet 来制作一些神奇的 map 。

我根据基本示例使用 index.js 创建了一个基本 Electron 应用程序。我还添加了一个基本的 index.hetml:

<!DOCTYPE html>
<html>

<head>

<title>Page Title</title>

</head>

<body>
<div id="map"></div>
</body>

<script>
require('./renderer')
</script>

</html>

以及 renderer.js 中的 Leaflet 内容

window.L = require('leaflet')

var map = L.map('map').setView([51.0420175, 13.7358889], 12)

L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);

当我运行应用程序时,窗口会打开,并且还会显示一些 MapTiles。但是它们并没有全部加载,当我重新占用窗口时它们会变得困惑:

Window before reseizing

Window after reseizing

我的代码有什么问题?

最佳答案

我遇到了同样的问题。我认为最好的解决方案是

bower install leaflet

然后在 .html 文件的头部使用它:

<link rel="stylesheet" href="bower_components/leaflet/dist/leaflet.css" />
<style>
body { margin:0; padding:0; }
#map { position: absolute; top:0; bottom:0; right:0; left:0; }
</style>

关于javascript - 传单在 Electron 中翻转瓷砖,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50586793/

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