如何使用 PyQt5.QWebkitWidgets 在我的 QtGui 中显示 google 地图

Question

我目前正在尝试将 google 地图嵌入到基于 PyQt5 的 GUI 中。我的环境包括 Ubuntu 16.04 LTS 和 python 2.7.

基本上，我正在尝试将以下两个 python 脚本（map.py 和 gui.py）合并为一个脚本（gui.py），我将不胜感激如果有人阐明了这个问题。

--------------------------------- < map.py > -----------------------------------
#!/usr/bin/env python
# Google Maps JavaScript API:
# https://developers.google.com/maps/documentation/javascript/tutorial

import sys, os
from PyQt5.QtCore import *
from PyQt5.QtGui import *
from PyQt5.QtWebKit import QWebSettings
from PyQt5.QtWidgets import QApplication
from PyQt5.QtWebKitWidgets import QWebView


app = QApplication(sys.argv)

web = QWebView()
web.settings().setAttribute(QWebSettings.JavascriptEnabled, True)
tempPath = "file:///" + os.path.join(os.getcwd(), "map.html").replace('\','/')

web.load(QUrl(tempPath))
web.show()

sys.exit(app.exec_())

--------------------------------- < gui.py > -----------------------------------
#!/usr/bin/env python

import sys, time, subprocess, os
from PyQt5.QtGui import *
from PyQt5.QtCore import *
from PyQt5.QtWidgets import *
from PyQt5 import QtCore, QtWidgets

class Cmd:
    def sensor_start(self):
        print('Sensor Start button click')
        subprocess.Popen("exec " + "python remotedata.py", shell=True)

    def sensor_end(self):
        print('Sensor End button click')
    subprocess.Popen("pkill -f remotedata.py",shell=True)

    def mission_start(self):
        print('Mission Start button click')
        subprocess.Popen("rosrun mavros mavsafety arm",shell=True)
        time.sleep(1)
        subprocess.Popen("rosrun mavros mavsys mode -c OFFBOARD",shell=True)

    def mission_end(self):
        print('Mission End button click')
        subprocess.Popen("rosrun mavros mavsys mode -c AUTO.RTL",shell=True)

    def mission_hold(self):
        print('Mission Hold button click')
        subprocess.Popen("rosrun mavros mavsys mode -c AUTO.LOITER",shell=True)


class MainWindow(QMainWindow):
    def __init__(self):
        QMainWindow.__init__(self)

    self.setMinimumSize(QSize(1280,800))
        self.setWindowTitle("Ocean Exploration UAV")
        self.statusBar().showMessage('Copyright 2020 www.uaslaboratory.com. All rights reserved.')

    # SENSOR
        self.nameLabel0 = QLabel(self)
        self.nameLabel0.setText('Sensor:')
        self.nameLabel0.move(20, 20)

    # MISSION
        self.nameLabel1 = QLabel(self)
        self.nameLabel1.setText('Mission:')
        self.nameLabel1.move(20, 50)

    # SENSOR: Start Data Logging
        button = QPushButton('Start', self)
        button.setToolTip('Start data logging')
        button.move(90,20)
        button.clicked.connect(cmd.sensor_start)

        # SENSOR: Start Data Logging
        button = QPushButton('End', self)
        button.setToolTip('End data logging')
        button.move(190,20)
        button.clicked.connect(cmd.sensor_end)

    # MISSION: Start Mission
        button = QPushButton('Start', self)
        button.setToolTip('Start UAV mission')
        button.move(90,50)
        button.clicked.connect(cmd.mission_start)

    # MISSION: End Mission
        button = QPushButton('End', self)
        button.setToolTip('End UAV mission')
        button.move(190,50)
        button.clicked.connect(cmd.mission_end)

    # MISSION: Hold Mission
        button = QPushButton('Hold', self)
        button.setToolTip('Hold UAV mission')
        button.move(290,50)
        button.clicked.connect(cmd.mission_hold)

    self.show()

if __name__ == "__main__":
    cmd = Cmd()

    app = QtWidgets.QApplication(sys.argv)
    mainWin = MainWindow()
    mainWin.show()

    sys.exit(app.exec_())
    time.sleep(5)

Answer 1

您只需放置一个小部件 QWebView 即可。为了管理我使用 qlayouts 的位置：

import os
import subprocess
import sys
from PyQt5.QtCore import QSize, QUrl
from PyQt5.QtWidgets import (
    QApplication,
    QLabel,
    QMainWindow,
    QPushButton,
    QWidget,
    QGridLayout,
)
from PyQt5.QtWebKit import QWebSettings
from PyQt5.QtWebKitWidgets import QWebView


CURRENT_DIR = os.path.dirname(os.path.realpath(__file__))


class Cmd:
    def sensor_start(self):
        print("Sensor Start button click")
        subprocess.Popen("exec " + "python remotedata.py", shell=True)

    def sensor_end(self):
        print("Sensor End button click")

    subprocess.Popen("pkill -f remotedata.py", shell=True)

    def mission_start(self):
        print("Mission Start button click")
        subprocess.Popen("rosrun mavros mavsafety arm", shell=True)
        time.sleep(1)
        subprocess.Popen("rosrun mavros mavsys mode -c OFFBOARD", shell=True)

    def mission_end(self):
        print("Mission End button click")
        subprocess.Popen("rosrun mavros mavsys mode -c AUTO.RTL", shell=True)

    def mission_hold(self):
        print("Mission Hold button click")
        subprocess.Popen("rosrun mavros mavsys mode -c AUTO.LOITER", shell=True)


class MainWindow(QMainWindow):
    def __init__(self):
        QMainWindow.__init__(self)
        self.setMinimumSize(QSize(1280, 800))
        self.setWindowTitle("Ocean Exploration UAV")
        self.statusBar().showMessage(
            "Copyright 2020 www.uaslaboratory.com. All rights reserved."
        )

        # SENSOR
        self.nameLabel0 = QLabel("Sensor:")

        # MISSION
        self.nameLabel1 = QLabel("Mission:")

        # SENSOR: Start Data Logging
        button_start_logging = QPushButton("Start", toolTip="Start data logging")
        button_start_logging.clicked.connect(cmd.sensor_start)

        # SENSOR: Start Data Logging
        button_end_logging = QPushButton("End", toolTip="End data logging")
        button_end_logging.clicked.connect(cmd.sensor_end)

        # MISSION: Start Mission
        button_start_uav = QPushButton("Start", toolTip="Start UAV mission")
        button_start_uav.clicked.connect(cmd.mission_start)

        # MISSION: End Mission
        button_end_uav = QPushButton("End", toolTip="End UAV mission")
        button_end_uav.clicked.connect(cmd.mission_end)

        # MISSION: Hold Mission
        button_hold_uav = QPushButton("Hold", toolTip="Hold UAV mission")
        button_hold_uav.clicked.connect(cmd.mission_hold)

        web = QWebView()
        web.settings().setAttribute(QWebSettings.JavascriptEnabled, True)

        filename = os.path.join(CURRENT_DIR, "map.html")
        url = QUrl.fromLocalFile(filename)
        web.load(url)

        central_widget = QWidget()
        self.setCentralWidget(central_widget)
        lay = QGridLayout(central_widget)
        lay.addWidget(self.nameLabel0, 0, 0)
        lay.addWidget(button_start_logging, 0, 1)
        lay.addWidget(button_end_logging, 0, 2)
        lay.addWidget(self.nameLabel1, 1, 0)
        lay.addWidget(button_start_uav, 1, 1)
        lay.addWidget(button_end_uav, 1, 2)
        lay.addWidget(button_hold_uav, 1, 3)
        lay.addWidget(web, 2, 0, 1, 5)
        lay.setColumnStretch(4, 1)


if __name__ == "__main__":
    cmd = Cmd()

    app = QApplication(sys.argv)
    mainWin = MainWindow()
    mainWin.show()

    sys.exit(app.exec_())
    time.sleep(5)

如何使用 PyQt5.QWebkitWidgets 在我的 QtGui 中显示 google 地图

How to show google map in my QtGui using PyQt5.QWebkitWidgets

python

qtwebkit

python-2.7

pyqt5

qtwidgets