c++ QWebEngineView应用无法加载Google Maps API，js：Uncaught(in promise)错误：无法加载Google Maps JavaScript API

我有一个在QWebEngineView中显示GoogleMap的应用程序。该应用程序在Windows上运行良好，但到目前为止，我还没有成功地让应用程序在Ubuntu或MacOS上运行。为了缩小问题，我修改了Qt Map Example以复制错误。这个测试应用程序是在Qt版本6.4.1上编译的。GCC++编译器是版本11.04。

maps.pro：

TEMPLATE = app
QT += webenginewidgets widgets
HEADERS += \
    mainwindow.h
SOURCES += main.cpp \
    mainwindow.cpp
CONFIG+=use_gold_linker
target.path = $$[QT_INSTALL_EXAMPLES]/webenginewidgets/maps
INSTALLS += target

字符串

main.cpp

// Copyright (C) 2017 The Qt Company Ltd.
// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause
#include "mainwindow.h"
#include <QApplication>
int main(int argc, char *argv[])
{
    QCoreApplication::setOrganizationName("QtExamples");
    QApplication app(argc, argv);
    MainWindow mainWindow;
    mainWindow.resize(1024, 768);
    mainWindow.show();
    return app.exec();
}

型

mainwindow.h

// Copyright (C) 2017 The Qt Company Ltd.
// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause
#ifndef MAINWINDOW_H
#define MAINWINDOW_H
#include <QMainWindow>
#include <QWebEngineView>
class MainWindow : public QMainWindow
{
    Q_OBJECT
public:
    explicit MainWindow(QWidget *parent = nullptr);
private:
    QWebEngineView *m_view;
};
#endif // MAINWINDOW_H

型

主窗口.cpp

// Copyright (C) 2017 The Qt Company Ltd.
// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause
#include "mainwindow.h"
#include <QMessageBox>
#include <QDir>
MainWindow::MainWindow(QWidget *parent)
    : QMainWindow(parent)
    , m_view(new QWebEngineView(this))
{
    setCentralWidget(m_view);
    QWebEnginePage *page = m_view->page();
    QFileInfo info(QDir::currentPath() + QDir::separator() + "test.htm");
    if(info.exists())
       page->load(QUrl::fromLocalFile(info.filePath()));
       //page->load(QUrl("https://googlemaps.com"));
}

型

apikey.js //包含有效的apikey

var apikey2  = "APIKEY"; // API key 3
console.log("api keys loaded");

型

test.htm //主窗口.cpp加载的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>Simple Map</title>
    <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
    <!-- playground-hide -->
    <script src="apikey.js"> </script>
    <script>
      const process = { env: {} };
      process.env.GOOGLE_MAPS_API_KEY =
        apikey2;
    </script>
    <!-- playground-hide-end -->
    <!--link rel="stylesheet" type="text/css" href="./style.css" /-->
    <script type="module" src="./test_index.js"></script>
  </head>
  <body>
    <div id="map"></div>
    <!-- prettier-ignore -->
    <script>(g=>{var h,a,k,p="The Google Maps JavaScript API",c="google",l="importLibrary",q="__ib__",m=document,b=window;b=b[c]||(b[c]={});var d=b.maps||(b.maps={}),r=new Set,e=new URLSearchParams,u=()=>h||(h=new Promise(async(f,n)=>{await (a=m.createElement("script"));e.set("libraries",[...r]+"");for(k in g)e.set(k.replace(/[A-Z]/g,t=>"_"+t[0].toLowerCase()),g[k]);e.set("callback",c+".maps."+q);a.src=`https://maps.${c}apis.com/maps/api/js?`+e;d[q]=f;a.onerror=()=>h=n(Error(p+" could not load."));a.nonce=m.querySelector("script[nonce]")?.nonce||"";m.head.append(a)}));d[l]?console.warn(p+" only loads once. Ignoring:",g):d[l]=(f,...n)=>r.add(f)&&u().then(()=>d[l](f,...n))})
        ({key: apikey2, v: "weekly"});</script>
  </body>
</html>

型

test_index.js //JavaScript模块

let map; //google.maps.Map;
async function initMap() {
  const { Map } = await google.maps.importLibrary("maps");
  map = new Map(document.getElementById("map"), {
    center: { lat: -34.397, lng: 150.644 },
    zoom: 8,
  });
  console.log("initMap done");
}
initMap();
//export {};

型
运行程序会导致空白屏幕和以下错误：

19:15:35: Debugging /home/allen/Projects/build-maps-Desktop_Qt_6_4_1_GCC_64bit-Debug/maps ...
qt.webenginecontext: 
GL Type: desktop
Surface Type: OpenGL
Surface Profile: CompatibilityProfile
Surface Version: 4.3
QSG RHI Backend: OpenGL
Using Supported QSG Backend: yes
Using Software Dynamic GL: no
Using Multithreaded OpenGL: yes
Init Parameters:
  *  application-name maps 
  *  browser-subprocess-path /home/allen/Qt/6.4.1/gcc_64/libexec/QtWebEngineProcess 
  *  create-default-gl-context  
  *  disable-features ConsolidatedMovementXY,InstalledApp,BackgroundFetch,WebOTP,WebPayments,WebUSB,PictureInPicture 
  *  disable-setuid-sandbox  
  *  disable-speech-api  
  *  enable-features NetworkServiceInProcess,TracingServiceInProcess 
  *  enable-threaded-compositing  
  *  in-process-gpu  
  *  use-gl desktop 
js: Uncaught (in promise) Error: The Google Maps JavaScript API could not load.
23:38:02: Debugging of /home/allen/Projects/build-maps-Desktop_Qt_6_4_1_GCC_64bit-Debug/maps has finished with exit code 0.

型

c++ QWebEngineView应用无法加载Google Maps API，js：Uncaught(in promise)错误：无法加载Google Maps JavaScript API

1条答案

相关问题

热门标签

最新问答