Performance of QtWebEngine is very poor when zoom in/out with google maps api v3
Unsolved
QtWebEngine
-
Hi all
I make a simple app just display Google maps on Qt using WebEngine. So i create a HTML file and use Google Maps Javascript API v3 to display maps.
But the problem is the performance is very poor, lag occur when i drag / drop/ zoom in / zoom out.I tried changing the WebEngine url to "https://www.google.com/maps/" and the lag doesn't happen anymore. I don't understand where the problem?
Note: I built in release mode at QT 6.4.3
This is my HTML file:
<!DOCTYPE html> <html> <head> <title>Google Maps Example</title> <link rel="stylesheet" type="text/css" href="style.css"> <script src="qwebchannel.js"></script> <meta name="viewport" content="width=device-width, initial-scale=1"> </head> <body> <div id="map-container"> <div id="map"></div> </div> <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: "MyKey", v: "3.55", language: "ja", }); </script> <script src="index.js"></script> </body> </html>
This is my QML to display map:
import QtQuick 2.15 import QtQuick.Controls 2.15 import QtWebEngine import QtWebChannel Window { id: google_map_navi title: "Google Map Navi" width: 1600 height: 900 x: Constants.x y: Constants.y property bool isLoad: false; Component.onCompleted:{ console.debug("[Navi] onCompleted"); } QtObject{ id: backendId WebChannel.id: "backend" function receiveFromJS(msg) { LogInfo.revcQmlLog(msg); } } WebChannel { id: myWebChannel registeredObjects: backendId } WebEngineView { id: webview anchors.fill: parent webChannel: myWebChannel url: "html/index.html" profile { httpCacheType: WebEngineProfile.MemoryHttpCache persistentCookiesPolicy: WebEngineProfile.ForcePersistentCookies cachePath: "/tmp/webengineexample/customprofile/cache" persistentStoragePath: "/tmp/webengineexample/customprofile/data" storageName: "customprofile" } onContextMenuRequested: function(request) { request.accepted = true } settings { dnsPrefetchEnabled: true errorPageEnabled: true javascriptCanOpenWindows: false linksIncludedInFocusChain: false localContentCanAccessFileUrls: false localStorageEnabled: false navigateOnDropEnabled: false pdfViewerEnabled: false printElementBackgrounds: false } onLoadingChanged: { if (webview.loadProgress === 100) { isLoad = true; } } } }