javascript - 带有 PYQT QWebView 的谷歌地图 API

标签 javascript qt google-maps pyqt4 pyqt5

我一直在试验 googlemaps javascript API。

我的目标是在 map 上绘制折线。

我找到了下面的教程-> https://developers.google.com/maps/documentation/javascript/examples/polyline-simple

当我在网络浏览器中实现它时,它可以工作,但是,尝试在 QT QWebView 小部件中执行相同的操作却行不通。 map 显示正常,但未绘制折线。

我想知道您是否必须登录到您的 google 帐户才能使您的 googlemaps API key 被视为有效?即它想将 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,相关片段:

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 代码时看到的:

simple polyline on a googlemap in QWebView

最佳答案

您的错误可能是因为您没有传递有效的 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_())

输出:

enter image description here

更新:

我已经为 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你会找到完整的代码

关于javascript - 带有 PYQT QWebView 的谷歌地图 API,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48262562/

相关文章:

c++ - 如何从 Linux 应用程序中排除/usr/include 路径?

c++ - 将 QImage(icon) 转换为 grayScale 格式,同时保留背景

javascript - 当鼠标悬停不在标记中时设置信息窗口

javascript - 我如何使用 javascript 创建这种效果?

javascript - 可排序表格中的交替行颜色

javascript - 将 .live() 用于 iFrame.load() 事件?

javascript - 是否可以将服务注入(inject) Angular 1.5 组件的 templateUrl 属性?

multithreading - QThread中的QTcpSocket

javascript - 多个标记与div背景通信失败

google-maps - iFrame 上的内嵌框阴影(Google 日历)