电子中的传单翻转瓷砖 [英] Leaflet flipping tiles in electron
问题描述
嘿，我是电子新手，但我想在其中使用Leaflet来制作一些魔术贴图.
Hey im new to electron but i want to use Leaflet inside it to some magic mapping stuff.
根据基本示例，我使用index.js创建了一个基本的电子应用程序. 我还添加了一个基本index.hetml:
I created an basic electron application with the index.js according to the basic example. I added also an basic 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内容
And the Leaflet stuff inside the renderer.js
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: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);
当我运行该应用程序时，窗口将打开，并且还会显示一些MapTiles. 但是它们并没有全部加载，并且在重新分配窗口时会陷入混乱:
When I'm running the app the window is opening and also some MapTiles are displayed. But they they are not all loaded and they get messed up when im reseizing the window:
和
我的代码怎么了?
推荐答案
我遇到了同样的问题. 我认为最好的解决方案是
I ran into the same problem. I think the best solution is to
bower install leaflet
，然后在您的.html文件的头部中使用它:
and than use this in the head of your .html file:
<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>
这篇关于电子中的传单翻转瓷砖的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
