API Googlemaps с QT QWebView

1

Я экспериментировал с API javascript googlemaps.

Моя цель - нарисовать полилинию на карте.

Я нашел следующий учебник → https://developers.google.com/maps/documentation/javascript/examples/polyline-simple

Когда я реализовал его в веб-браузере, он работал, однако попытка сделать то же самое в виджета QT QWebView не работала. Карта отображается ОК, но полилинии не были построены.

Мне интересно, нужно ли вам войти в свою учетную запись google, чтобы ваш API-интерфейс googlemaps считался действительным? т.е. он хочет связать 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'))

webView, созданный в qt-дизайнере, соответствующий фрагмент:

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:

Изображение 174551

  • 1
    Покажите свой код. Qt4 или Qt5?
  • 0
    Обновление OP с соответствующими фрагментами кода.
Показать ещё 12 комментариев
Теги:
pyqt4
google-maps
qt
pyqt5

1 ответ

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_())

Выход:

Изображение 174551

Обновить:

Я переписал тот же код для 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_())

WebEngine:

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_())

В следующей ссылке вы найдете полный код

Поделиться
  • 0
    Большое спасибо. Когда я пытаюсь запустить main.py, я просто получаю странный указатель мыши «+». Приложение не отображается. Когда я щелкаю левой кнопкой мыши, я получаю сообщения об ошибках - включил их в OP
  • 0
    Действительно странно, так как ваш код выглядит великолепно. Действительно запутался относительно того, что здесь происходит ..
Показать ещё 46 комментариев

Ещё вопросы

Сообщество Overcoder
Наверх
Меню