运行来自 QWebView 的 JavaScript 函数 Google 地图 API, PyQT

Question

我正在尝试编写一段代码，从数据库中读取经度和纬度并将其传递给 JavaScript 函数，然后根据坐标的经度和纬度放置一个标记已从数据库中读取。

在 HTML 设置为 QWebView 之后，我使用：evaluateJavaScript 尝试运行 JavaScript MarkersFromDatabase 中的函数。

如您所见，我修改了 QWebPage class 以显示控制台错误消息，当我运行程序时，我收到此错误：

ReferenceError: Can't find variable: MarkersFromDatabase 0 undefined

我不明白为什么它在我运行调用一个函数时试图找到一个变量。
我不明白为什么这不是运行ning 函数。

如有任何帮助，我们将不胜感激。抱歉 JavaScript 格式混乱！

完整代码：

from PyQt4.QtWebKit import *
import sqlite3
from PyQt4.QtSql import *

class CustomQWebPage(QWebPage):
    def __init__(self):
        super().__init__()

    def javaScriptConsoleMessage(self,message,lineNumber,sourceID):
        print(message,lineNumber,sourceID)
        print("javascript console message^")

class ViewOnlyMap(QWebView):


    def __init__(self, parent=None):
        super().__init__()
        self.settings().setAttribute(QWebSettings.JavascriptEnabled, True)
        self.settings().setAttribute(QWebSettings.JavascriptCanOpenWindows, True)
        self.settings().setAttribute(QWebSettings.JavascriptCanAccessClipboard, True)
        self.settings().setAttribute(QWebSettings.DeveloperExtrasEnabled, True)
        self.CustomPage=CustomQWebPage()
        self.Coordinates=None

        self.set_code()
        self.get_marker_coordinates()



    def get_marker_coordinates(self):
        with sqlite3.connect("skateboard_progress_tracker.db") as db:
            cursor=db.cursor()
            sql="select SkateparkLongitude, SkateparkLatitude from Skatepark"
            cursor.execute(sql)
            self.Coordinates=cursor.fetchall()
        for coordinate in self.Coordinates:
            self.CustomPage.mainFrame().evaluateJavaScript('MarkersFromDatabase({0},{1})'.format(coordinate[0],coordinate[1]))

            print("Marker added")
            print(coordinate[0])
            print(coordinate[1])








    def set_code(self):

        self.html='''<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <title>Simple markers</title>
    <style>
      html, body, #map-canvas {
        height: 100%;
        width: 100%
        margin: 0px;
        padding: 0px
      }
    </style>
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
    <script>

        var map;
        var markers = [];
        var results = [];
        var coords = [];
        var highestLevel;


        function initialize() {


        var Centre = new google.maps.LatLng(52.20255705185695,0.1373291015625);
        var mapOptions = {
        zoom: 8,
        minZoom: 3,
        center: Centre,
        }
        map = new google.maps.Map(document.getElementById('map-canvas'),mapOptions);

        google.maps.event.addListener(map, 'click', function(event) {
        AddMarker(event.latLng);
        });

         }


         function MarkersFromDatabase(SkateparkLat,SkateparkLng) {
        var Skatepark = new google.maps.LatLng(SkateparkLat,SkateparkLng);
        //return Skatepark;

        AddMarker(Skatepark); }




        function AddMarker(location) {


        var marker = new google.maps.Marker({
        title: 'Test',
        position: location,
        animation: google.maps.Animation.DROP,
        map: map

        });
        //markers.push(marker);
        var lat = marker.getPosition().lat();
        var lng = marker.getPosition().lng();
        markers.push({"Object":marker,"Lat":lat,"Lng":lng});

                var contentString = '<div id="content">'+
      '<div id="siteNotice">'+
      '</div>'+
      '<h1 id="firstHeading" class="firstHeading">Skatepark</h1>'+
      '<div id="bodyContent">'+
      '<p>A skatepark description </p>'+
      '</div>'+
      '</div>';

      var infowindow = new google.maps.InfoWindow({
      content: contentString
  });

      google.maps.event.addListener(marker, 'rightclick', function(event) {
        marker.setMap(null);
        });
    google.maps.event.addListener(marker, 'mouseover', function(event) {
    infowindow.open(map,marker);
  });
       }


function GetMarkers(){
     return markers;
        }


google.maps.event.addDomListener(window, 'load', initialize);
    </script>
  </head>
  <body>
    <div id="map-canvas"></div>
  </body>
</html> '''
        self.setHtml(self.html)

Answer 1

在尝试调用 javascript 函数之前，您需要让网页有机会加载。所以为 loadFinished 信号添加一个处理程序：

class ViewOnlyMap(QWebView):
    def __init__(self, parent=None):
        super().__init__()
        ...
        self.setPage(self.CustomPage)
        self.loadFinished.connect(self.handleLoadFinished)
        self.set_code()

    def handleLoadFinished(self, ok):
        if ok:
            print("Page loaded successfully")
            self.get_marker_coordinates()
        else:
            print("Could not load page")

运行来自 QWebView 的 JavaScript 函数 Google 地图 API, PyQT

Running a JavaScript Function From QWebView Google Maps API, PyQT

javascript

python

google-maps

pyqt

qwebview

运行 来自 QWebView 的 JavaScript 函数 *Google 地图 API, PyQT*

Running a JavaScript Function From QWebView *Google Maps API, PyQT*

javascript

python

google-maps

pyqt

qwebview

运行来自 QWebView 的 JavaScript 函数 Google 地图 API, PyQT

Running a JavaScript Function From QWebView Google Maps API, PyQT