带有 QT QWebView 的 Googlemaps API
Posted
技术标签:
【中文标题】带有 QT QWebView 的 Googlemaps API【英文标题】：Googlemaps API with a QT QWebView 【发布时间】：2018-01-15 11:57:51 【问题描述】：我一直在试验 googlemaps javascript API。
我的目标是在地图上绘制折线。
我找到了以下教程-> https://developers.google.com/maps/documentation/javascript/examples/polyline-simple
当我在网络浏览器中实现它时，它可以工作，但是，尝试在 QT QWebView 小部件中做同样的事情并没有奏效。地图显示正常，但没有绘制折线。
我想知道您是否必须登录到您的 google 帐户才能使您的 googlemaps API 密钥被视为有效？即它想将 API 与用户配对？
这可能是浏览器工作但 QWebView 不工作的原因吗？
在python方面：
from PyQt4.QtCore import *
from PyQt4.QtGui import *
from PyQt4.QtWebKit import *
def __init__(self, parent=None):
super(g3ui, self).__init__(parent)
self.setupUi(self)
self.initMap()
...
def initMap(self):
self.webView.settings().setAttribute(QWebSettings.JavascriptEnabled, True)
self.webView.load(QUrl('polyline.html'))
在qt设计器中创建的webView，相关sn-p：
class Ui_MainWindow(object):
def setupUi(self, MainWindow):
...
self.webView = QtWebKit.QWebView(self.tab_10)
self.webView.setGeometry(QtCore.QRect(30, 20, 1121, 401))
self.webView.setUrl(QtCore.QUrl(_fromUtf8("about:blank")))
self.webView.setObjectName(_fromUtf8("webView"))
在html端（polyline.html）：
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>Simple Polylines</title>
<style>
/* Always set the map height explicitly to define the size of the div
* element that contains the map. */
#map
height: 100%;
/* Optional: Makes the sample page fill the window. */
html, body
height: 100%;
margin: 0;
padding: 0;
</style>
</head>
<body>
<div id="map"></div>
<script>
// This example creates a 2-pixel-wide red polyline showing the path of
// the first trans-Pacific flight between Oakland, CA, and Brisbane,
// Australia which was made by Charles Kingsford Smith.
function initMap()
var map = new google.maps.Map(document.getElementById('map'),
zoom: 3,
<!-- zoom: 10, -->
<!-- center: lat: 50.8548, lng: 1.1866, -->
center: lat: 0, lng: -180,
mapTypeId: 'terrain'
);
var flightPlanCoordinates = [
lat: 37.772, lng: -122.214,
lat: 21.291, lng: -157.821,
lat: -18.142, lng: 178.431,
lat: -27.467, lng: 153.027
];
var flightPath = new google.maps.Polyline(
path: flightPlanCoordinates,
geodesic: true,
strokeColor: '#FF0000',
strokeOpacity: 1.0,
strokeWeight: 2
);
flightPath.setMap(map);
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyA6Hzn6vaW5MOn-rh9c4kenP8jBpL7rzbQ&callback=initMap">
</script>
</body>
</html>
这是取自 googlemaps javascript API 教程网站的简单折线教程。
更新以响应 eyllanesc 答案中的代码：
这是我在运行简单的 main.py 代码时看到的：
【问题讨论】：
显示您的代码。 Qt4 还是 Qt5？ 我已经尝试了html中的链接代码，它可以工作，但是你显示的html只画了一个标记，你没有画折线 在你的测试中，地图绘制了吗？ 您的密钥有效吗？ 试试我的答案 【参考方案1】：可能你的错误是因为你没有传递一个有效的url，假设.html在.py的同一个文件夹中，我提出以下解决方案：
.
├── main.py
└── polyline.html
代码：
import sys
from PyQt4.QtCore import *
from PyQt4.QtGui import *
from PyQt4.QtWebKit import *
if __name__ == '__main__':
app = QApplication(sys.argv)
view = QWebView()
view.settings().setAttribute(QWebSettings.JavascriptEnabled, True)
view.load(QUrl.fromLocalFile(QDir.current().absoluteFilePath('polyline.html')))
view.show()
sys.exit(app.exec_())
输出：
更新：
我已经为 PyQt5 重写了相同的代码：
WebKit：
import sys
from PyQt5.QtCore import *
from PyQt5.QtWidgets import *
from PyQt5.QtWebKit import *
from PyQt5.QtWebKitWidgets import *
if __name__ == '__main__':
app = QApplication(sys.argv)
view = QWebView()
view.settings().setAttribute(QWebSettings.JavascriptEnabled, True)
view.load(QUrl.fromLocalFile(QDir.current().absoluteFilePath('polyline.html')))
view.show()
sys.exit(app.exec_())
网络引擎：
import sys
from PyQt5.QtCore import *
from PyQt5.QtWidgets import *
from PyQt5.QtWebEngineWidgets import *
if __name__ == '__main__':
app = QApplication(sys.argv)
view = QWebEngineView()
view.settings().setAttribute(QWebEngineSettings.JavascriptEnabled, True)
view.load(QUrl.fromLocalFile(QDir.current().absoluteFilePath('polyline.html')))
view.show()
sys.exit(app.exec_())
在下面的link你会找到完整的代码
【讨论】：
@bph 看来是编辑器的编码问题，你可以用你的IDE写回我的代码，因为它们只有几行。 @bph 从终端运行它并告诉我您是否在终端中收到任何消息？我可以通过 teamviewer 帮助您。 @bph 他们是一样的，我已经把我的api放在我的例子中了。 @bph 是的，启用该配置，在加载地图之前右键单击并选择检查，然后检查网络和控制台选项卡，检查是否有错误消息。 @bph 你在使用我的 api 密钥吗？我在使用你的 api 时遇到了问题。以上是关于带有 QT QWebView 的 Googlemaps API的主要内容，如果未能解决你的问题，请参考以下文章
QT 从 QWebView 的 QNetworkAccessManager 读取数据
Qt：QWebview 不在另一台机器上显示 jpg、gif、png 图像
Qt 5.3 使用原来的QT4.8.4项目时QWebView QWebFrame