MacOS 上的 QWebEngineView 无法加载 Google 地图，并出现“未捕获的 ReferenceError：google 未定义”错误

问题描述 投票：0回答：1

我有一个 Qt 应用程序，可以在 QWebEngineView 中显示 Google 地图。该应用程序在 Windows 10 上编译时运行良好。但是，它在 macOS 上失败。

这是控制台输出的一部分，显示了我尝试运行时发生的错误

initMap
：

14:32:18.294 Info: listening on localhost:12345     (mainwindow.cpp:198, MainWindow::MainWindow(int, char **, QWidget *))
14:32:18.294 Info: registering webViewBridge     (mainwindow.cpp:208, MainWindow::MainWindow(int, char **, QWidget *))

14:32:19.214 Info: progress  0  loading  "file:///Users/allenkempe/Projects/mapper/mapper_QT/mapper_app/html/GoogleMaps2.htm"     (mainwindow.cpp:4828, auto MyWebEnginePage::MyWebEnginePage(QObject *)::(anonymous class)::operator()(int) const)
14:32:19.406 Info: progress  70  loading  "file:///Users/allenkempe/Projects/mapper/mapper_QT/mapper_app/html/GoogleMaps2.htm"     (mainwindow.cpp:4828, auto MyWebEnginePage::MyWebEnginePage(QObject *)::(anonymous class)::operator()(int) const)
14:32:19.493 Debug: javaScriptConsoleMessage: "Loading WebChannel.js"  at 4  source: "qrc:///WebChannel.js"     (mainwindow.h:74, virtual void MyWebEnginePage::javaScriptConsoleMessage(QWebEnginePage::JavaScriptConsoleMessageLevel, const QString &, int, const QString &))
14:32:19.498 Debug: javaScriptConsoleMessage: "Loading GoogleMaps.js"  at 24  source: "qrc:///GoogleMaps.js"     (mainwindow.h:74, virtual void MyWebEnginePage::javaScriptConsoleMessage(QWebEnginePage::JavaScriptConsoleMessageLevel, const QString &, int, const QString &))
14:32:19.498 Debug: javaScriptConsoleMessage: "GoogleMaps.js line 58!"  at 74  source: "qrc:///GoogleMaps.js"     (mainwindow.h:74, virtual void MyWebEnginePage::javaScriptConsoleMessage(QWebEnginePage::JavaScriptConsoleMessageLevel, const QString &, int, const QString &))
14:32:19.498 Debug: javaScriptConsoleMessage: "GoogleMaps.js loaded!"  at 2771  source: "qrc:///GoogleMaps.js"     (mainwindow.h:74, virtual void MyWebEnginePage::javaScriptConsoleMessage(QWebEnginePage::JavaScriptConsoleMessageLevel, const QString &, int, const QString &))
14:32:19.498 Debug: javaScriptConsoleMessage: "Connecting to WebSocket server at ws://localhost:12345."  at 13  source: "qrc:///WebChannel.js"     (mainwindow.h:74, virtual void MyWebEnginePage::javaScriptConsoleMessage(QWebEnginePage::JavaScriptConsoleMessageLevel, const QString &, int, const QString &))
14:32:19.534 Info: progress  80  loading  "file:///Users/allenkempe/Projects/mapper/mapper_QT/mapper_app/html/GoogleMaps2.htm"     (mainwindow.cpp:4828, auto MyWebEnginePage::MyWebEnginePage(QObject *)::(anonymous class)::operator()(int) const)
14:32:19.534 Info: progress  100  loading  "file:///Users/allenkempe/Projects/mapper/mapper_QT/mapper_app/html/GoogleMaps2.htm"     (mainwindow.cpp:4828, auto MyWebEnginePage::MyWebEnginePage(QObject *)::(anonymous class)::operator()(int) const)
14:32:19.970 Info: new connection to browser     (mainwindow.cpp:186, auto MainWindow::MainWindow(int, char **, QWidget *)::(anonymous class)::operator()() const)
14:32:19.987 Debug: javaScriptConsoleMessage: "WebSocket connected, setting up QWebChannel."  at 30  source: "qrc:///WebChannel.js"     (mainwindow.h:74, virtual void MyWebEnginePage::javaScriptConsoleMessage(QWebEnginePage::JavaScriptConsoleMessageLevel, const QString &, int, const QString &))
14:32:20.040 Debug: javaScriptConsoleMessage: "enter QWebChannel[object Object]"  at 32  source: "qrc:///WebChannel.js"     (mainwindow.h:74, virtual void MyWebEnginePage::javaScriptConsoleMessage(QWebEnginePage::JavaScriptConsoleMessageLevel, const QString &, int, const QString &))
14:32:20.040 Debug: javaScriptConsoleMessage: "connect to signals [object Object]"  at 39  source: "qrc:///WebChannel.js"     (mainwindow.h:74, virtual void MyWebEnginePage::javaScriptConsoleMessage(QWebEnginePage::JavaScriptConsoleMessageLevel, const QString &, int, const QString &))
14:32:20.041 Debug: javaScriptConsoleMessage: "begin GoogleMaps.js initMap()"  at 4  source: "qrc:///initMap.js"     (mainwindow.h:74, virtual void MyWebEnginePage::javaScriptConsoleMessage(QWebEnginePage::JavaScriptConsoleMessageLevel, const QString &, int, const QString &))
14:32:20.041 Debug: "initMap started"     (webviewbridge.cpp:293, void WebViewBridge::debug(QString))
14:32:20.042 Debug: javaScriptConsoleMessage: "Uncaught ReferenceError: google is not defined"  at 20  source: "qrc:///initMap.js"     (mainwindow.h:74, virtual void MyWebEnginePage::javaScriptConsoleMessage(QWebEnginePage::JavaScriptConsoleMessageLevel, const QString &, int, const QString &))
  1. QWebchannel 用于设置我所说的 
    webViewBridge
    ，它允许 C++ 应用程序与 GoogleMaps.js 中的 JavaScript 例程进行交互。
  2. 加载 Google Maps API 完成后，将调用 
    onLoad
    中的函数 
    WebChannel
    。设置完 
    webViewBridge
    后，它会在 
    window.initialize
    中调用 
    GoogleMaps.js
    ，从而调用 
    initMap
    来设置 Google Maps API。

HTML：

<!DOCTYPE html>
<html >
 <head>
  <meta name="viewport" content="initial-scale=1.0" user-scalable="yes" />
  <style type="text/css">
    html { height: 100% }
    body { height: 100%; margin: 0; padding: 0 }
    #map { height: 100% }
    .menu {
        width: 160px;
        box-shadow: 3px 3px 5px #888888;
        border-style: solid;
        border-width: 1px;
        border-color: grey;
        border-radius: 2px;
        background-color: #ffff;
        position: fixed;
        text-align: center;
        display: none;
    }

    .menu-item {
        height: 20px;
        background-color: white;
    }
</style>
  <title>Mapper</title>

  <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
  <script type="text/javascript" src="qrc:///qwebchannel.js"> </script>
  <!-- API key 3 -->
  <!--script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery.googlemap/1.5.1/jquery.googlemap.js"></script-->
  <!--script src="gmaps.js"></script-->
  <script type="text/javascript" src="qrc:///ExtDraggableObject.js"></script>
  <script type="text/javascript" src="qrc:///opacityControl.js"></script>
  <script type="text/javascript" src="qrc:///WebChannel.js" > </script>
  <script type="text/javascript" src="qrc:///GoogleMaps.js" > </script>
  <!--script type="text/javascript" src="qrc:///onLoad.js"> </script-->
  <script>
   onLoad();
   </script>

 </head>
 <body style="font-family: Arial; border: 0 none;">
 <!--The div element for the map -->
 <div id="map"></div>

 <script src="src/index.js"></script>
 <script type="text/javascript" src="qrc:///initMap.js" async defer></script>
 <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?v=weekly&key=APIKEY&callback=onLoad" async defer></script>

 <div class="menu" id="menu">
     <div class="menu-item"><i class="glyphicon glyphicon-file"></i>Manage files</div>
 </div>
 </body>
</html>

出于安全原因，我的 HTML 文件中的 API 密钥已被隐藏。

另外，我应该指出，尝试使用新的 Google Maps API 加载程序也会失败，因此使用回调恢复到旧方法。

我提供的所有 HTML 代码都可以在 Windows 上正常运行。 更多源文件在这里Github

自从我发表原来的帖子以来，我进行了一些更改来解决原来的问题。尽管我之前评论说它在 Windows 下运行良好，但我发现虽然 Google 地图可以加载，但存在大量 JavaScript 错误。我将这些问题追溯到多个 Javascript 片段以及使用 qrc 加载资源。

我现在已将所有 Javascript 代码恢复到一个文件，其中包括 initMap() 作为异步函数。 apikey.js 是一个小的 javascript 文件，使我能够指定要在 html 文件中使用的 api 密钥。

虽然最初的问题似乎已得到解决，但 Google 地图现在在 UBUNTU 和 MACOS 中失败，并显示错误“未捕获（承诺）错误：Google 地图 JavaScript API 无法加载。” 但是，GoogleMaps API 在 Windows 上加载并运行正常。

14:02:36.932 Info: progress  0  loading  "file:///home/allen/Projects/Mapper/mapper/mapper_app/Resources/GoogleMaps2n.htm"     (mainwindow.cpp:4875, MyWebEnginePage::MyWebEnginePage(QObject*)::<lambda(int)>)
14:02:37.009 Info: progress  70  loading  "file:///home/allen/Projects/Mapper/mapper/mapper_app/Resources/GoogleMaps2n.htm"     (mainwindow.cpp:4875, MyWebEnginePage::MyWebEnginePage(QObject*)::<lambda(int)>)
14:02:37.036 Debug: javaScriptConsoleMessage: "Loading WebChannel.js"  at 4  source: "file:///home/allen/Projects/Mapper/mapper/mapper_app/Resources/WebChannel.js"     (mainwindow.h:74, virtual void MyWebEnginePage::javaScriptConsoleMessage(QWebEnginePage::JavaScriptConsoleMessageLevel, const QString&, int, const QString&))
14:02:37.041 Debug: javaScriptConsoleMessage: "Loading GoogleMaps.js"  at 25  source: "file:///home/allen/Projects/Mapper/mapper/mapper_app/Resources/GoogleMaps.js"     (mainwindow.h:74, virtual void MyWebEnginePage::javaScriptConsoleMessage(QWebEnginePage::JavaScriptConsoleMessageLevel, const QString&, int, const QString&))
14:02:37.041 Debug: javaScriptConsoleMessage: "GoogleMaps.js loaded!"  at 2782  source: "file:///home/allen/Projects/Mapper/mapper/mapper_app/Resources/GoogleMaps.js"     (mainwindow.h:74, virtual void MyWebEnginePage::javaScriptConsoleMessage(QWebEnginePage::JavaScriptConsoleMessageLevel, const QString&, int, const QString&))
14:02:37.042 Debug: javaScriptConsoleMessage: "Connecting to WebSocket server at ws://localhost:12345."  at 13  source: "file:///home/allen/Projects/Mapper/mapper/mapper_app/Resources/WebChannel.js"     (mainwindow.h:74, virtual void MyWebEnginePage::javaScriptConsoleMessage(QWebEnginePage::JavaScriptConsoleMessageLevel, const QString&, int, const QString&))
14:02:37.043 Debug: javaScriptConsoleMessage: "api keys loaded"  at 3  source: "file:///home/allen/Projects/Mapper/mapper/mapper_app/Resources/apikey.js"     (mainwindow.h:74, virtual void MyWebEnginePage::javaScriptConsoleMessage(QWebEnginePage::JavaScriptConsoleMessageLevel, const QString&, int, const QString&))
14:02:37.124 Info: new connection to browser     (mainwindow.cpp:4649, MainWindow::setupbridge()::<lambda()>)
14:02:37.125 Info: progress  80  loading  "file:///home/allen/Projects/Mapper/mapper/mapper_app/Resources/GoogleMaps2n.htm"     (mainwindow.cpp:4875, MyWebEnginePage::MyWebEnginePage(QObject*)::<lambda(int)>)
14:02:37.126 Info: progress  100  loading  "file:///home/allen/Projects/Mapper/mapper/mapper_app/Resources/GoogleMaps2n.htm"     (mainwindow.cpp:4875, MyWebEnginePage::MyWebEnginePage(QObject*)::<lambda(int)>)
14:02:37.126 Debug: javaScriptConsoleMessage: "WebSocket connected, setting up QWebChannel."  at 30  source: "file:///home/allen/Projects/Mapper/mapper/mapper_app/Resources/WebChannel.js"     (mainwindow.h:74, virtual void MyWebEnginePage::javaScriptConsoleMessage(QWebEnginePage::JavaScriptConsoleMessageLevel, const QString&, int, const QString&))
14:02:37.128 Debug: javaScriptConsoleMessage: "enter QWebChannel[object Object]"  at 32  source: "file:///home/allen/Projects/Mapper/mapper/mapper_app/Resources/WebChannel.js"     (mainwindow.h:74, virtual void MyWebEnginePage::javaScriptConsoleMessage(QWebEnginePage::JavaScriptConsoleMessageLevel, const QString&, int, const QString&))
14:02:37.129 Debug: javaScriptConsoleMessage: "connect to signals [object Object]"  at 39  source: "file:///home/allen/Projects/Mapper/mapper/mapper_app/Resources/WebChannel.js"     (mainwindow.h:74, virtual void MyWebEnginePage::javaScriptConsoleMessage(QWebEnginePage::JavaScriptConsoleMessageLevel, const QString&, int, const QString&))
14:02:37.131 Debug: javaScriptConsoleMessage: "Uncaught (in promise) Error: The Google Maps JavaScript API could not load."  at 44  source: "file:///home/allen/Projects/Mapper/mapper/mapper_app/Resources/GoogleMaps2n.htm"     (mainwindow.h:74, virtual void MyWebEnginePage::javaScriptConsoleMessage(QWebEnginePage::JavaScriptConsoleMessageLevel, const QString&, int, const QString&))

为了解决 Google Maps API 的失败问题，我重新创建了我的 apikeys 并检查了 div 元素，所有可能的问题根源。

在我发表原始文章时，我无法让 QWebEngineView 在 UBUNTU 中显示除灰屏之外的任何内容，但找到一个链接，建议在我的 .pro 文件中指定“CONFIG+=use_gold_linker”可以解决此问题。这很有效，我现在可以加载“https”//googlemaps.com”等 URL 或其他网页，但不能加载本地 html 文件。

macos qt google-maps-api-3 qwebengineview
1个回答
0
投票

已解决： 将html文件和本地javascript文件作为qrc资源加载解决了这个问题。即

webView->load(QUrl("qrc:/GoogleMaps.htm"));
解决了问题。

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.