如何在PyQt5中使推广的widget的html内容填充不同屏幕大小的widget
如何在PyQt5中使推广的widget的html内容填充不同屏幕大小的widget
提问于 2020-11-10 06:32:06
在Qt designer中创建的简单UI中，我有一个自定义小部件，其中包含一个小叶地图。下面是我为这个自定义小部件编写的python代码：
from PyQt5.QtCore import *
from PyQt5.QtWidgets import *
from PyQt5.QtWebEngineWidgets import *
class LeafWidget (QWidget):
def __init__(self, parent=None):
QWidget.__init__(self, parent)
self.browser = QWebEngineView()
self.browser.settings().setAttribute(QWebEngineSettings.JavascriptEnabled, True)
self.browser.load(QUrl.fromLocalFile(QDir.current().absoluteFilePath('mymap.html')))
self.browser.loadFinished.connect(self.onLoadFinished)
lay = QVBoxLayout(self)
lay.addWidget(self.browser)
def onLoadFinished(self, ok):
if ok:
self.browser.page().runJavaScript('')下面是我用来加载小叶地图的html文件：
<!DOCTYPE html>
<head>
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.2/leaflet.css" />
<script src="http://cdn.leafletjs.com/leaflet-0.7.2/leaflet.js"></script>
<style>
#my-map {
width:1200px;
height:450px;
}
</style>
</head>
<body>
<div id="my-map"></div>
<script>
var osmUrl1 = 'http://{s}.tile.osm.org/{z}/{x}/{y}.png';
var osm = L.tileLayer(osmUrl1, {id: 'MapID', attribution:'1'});
var baseMaps = {
"osm": osm,
};
var map = L.map('my-map').setView([40,-90], 8);
osm.addTo(map)
</script>
</body>
</html>我已经在Qt设计器中设置了小工具的布局，以便在调整窗口大小或全屏时调整大小。问题是我的leaflet地图没有随小部件调整大小。我知道我为保存html格式地图的DIV设置了一个恒定的大小，但是如果没有定义一个固定的大小，DIV就根本看不见了。
我觉得这是一个DIV大小的HTML问题，但是我如何才能确保我的地图在调整窗口大小时能正确调整大小呢？
回答 1
Stack Overflow用户
回答已采纳
发布于 2020-11-10 06:46:34
问题是包含贴图的div有一个固定的大小：
#my-map {
width:1200px;
height:450px;
}解决方案是指出它采用了所有可能的大小：
#my-map {
position: absolute;
top: 0;
bottom: 0;
width: 100%;
height: 100%
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/64760193
复制相关文章
相似问题
腾讯云开发者
