解决QT使用QWebEngineView加载不出网页问题和实现qt与html网页基础通信

. 解决QT使用QWebEngineView加载不出网页问题      

        这次项目需要用到qt去调高德地图进行显示，查阅资料后知道了qt可以用QWebEngineView类打开html文件并进行显示但是途中遇到了地图加载不出来的问题。但将源代码发给其他人之后，发现别人可以打开，但时间略长大概需要十秒左右，怀疑是QT版本问题，我现在用的版本是QT6.6.7，此版本加载不出地图显示，但可以加载出经纬度的文字和显示框。之后重新切换QT版本至QT5.15.2之后，生成方式选择Release之后，问题解决，地图可以在一秒左右加载出来。

        ps:代码中最好加上一句QNetworkProxyFactory::setUseSystemConfiguration(false);这个代码是让qt不使用默认的代理，我测试下来，不加这句代码会稍微慢个两秒钟，也可能是偶然问题，现在不太清楚，但最好加上，避免奇奇怪怪的问题。

下面是我的显示代码：（这篇博客写完我会去研究qt与html的通信）（已更新）

1. Widget::Widget(QWidget *parent)
2.     : QWidget(parent)
3.     , ui(new Ui::Widget)
4. {
5.     ui->setupUi(this);
6.     QNetworkProxyFactory::setUseSystemConfiguration(false);
7.     mainMap_view = new QWebEngineView(this);
8.     mainMap_view->setParent(ui->frame);
9.     mainMap_view->page()->load(QUrl("qrc:/new/prefix1/Qtmap/GD.html"));
10.     QVBoxLayout *layout = new QVBoxLayout(this);
11.     layout->addWidget(mainMap_view);
12. }
14. Widget::~Widget()
15. {
16.     delete ui;
17. }

更新于2024年1月23日，现在成功的在qt界面点击，html获得的经纬度信息反馈回qt。先看一下效果：

实现qt与html网页基础通信

好了，现在给大家介绍一下实现逻辑。（其实我也有点懵，因为我不懂html的代码，功能的实现GPT帮了很大的忙。不得不插一句题外话，做纯软的话GPT真的太牛了，我做单片机的时候很多问题因为可能涉及硬件他给的答案只能参考。纯软就不一样了。好了继续）首先在qt的代码逻辑是这样：

第一步：定义一个基于QObject类的对象，GPT给的名字是MapInteraction那咱就用这个名字。这个对象类定义一个槽函数用来接收html发过来的经纬度信息。

.h文件内容和.cpp内容

1. #ifndef MAPINTERACTION_H
2. #define MAPINTERACTION_H
4. #include
5. #include
6. #include
7. #include
8. #include
9. #include
10. #include
11. class MapInteraction : public QObject
12. {
13. Q_OBJECT
14. public:
15. explicit MapInteraction(QObject *parent = nullptr);
16. public slots:
17. void handleMapClick(const QJsonObject &position);
18. signals:
19. };
21. #endif // MAPINTERACTION_H

1. #include "mapinteraction.h"
3. MapInteraction::MapInteraction(QObject *parent)
4. : QObject{parent}
5. {}
7. void MapInteraction::handleMapClick(const QJsonObject &position)
8. {
9. // 处理地图点击事件
10. double latitude = position["latitude"].toDouble();
11. double longitude = position["longitude"].toDouble();
12. // 在这里可以执行任何您想要的操作，例如将经纬度信息发送到Qt应用程序的其他部分
13. qDebug() << "Clicked on map. Longitude:" << longitude<<", latitude: "<
14. }

 第二步我们需要注册一个QWebchanle类的对象用来和html之间通信。

        1.根据上一步创建的类，new一个对象，我这里叫mapInteraction。mapInteraction = new MapInteraction(this);

        2.new一个QWebchanle类的对象，我这里叫webchanle。然后我们把第一步创建的对象mapInteraction注册进webchanle。 webchanle->registerObject(QStringLiteral("mapInteraction"), mapInteraction);

        3.翻看最上面的代码我们这里有个网页的类mainMap_view。然后我们把这个对象和webchanle 关联起来。mainMap_view->page()->setWebChannel(webchanle);

下面是完整cpp和h代码和上一步网页加载和在一起了

1. Widget::Widget(QWidget *parent)
2. : QWidget(parent)
3. , ui(new Ui::Widget)
4. {
5. ui->setupUi(this);
6. webchanle = new QWebChannel(this);
7. mapInteraction = new MapInteraction(this);
8. webchanle->registerObject(QStringLiteral("mapInteraction"), mapInteraction);
9. QNetworkProxyFactory::setUseSystemConfiguration(false);
10. layout = new QVBoxLayout(this);
11. mainMap_view = new QWebEngineView(this);
12. mainMap_view->setParent(ui->frame);
13. mainMap_view->page()->load(QUrl("qrc:/new/prefix1/Qtmap/GD.html"));
14. mainMap_view->page()->setWebChannel(webchanle);
15. layout->addWidget(mainMap_view);
16. }
18. Widget::~Widget()
19. {
20. delete ui;
21. delete mainMap_view;
22. delete layout;
23. }

1. #ifndef WIDGET_H
2. #define WIDGET_H
4. #include
5. #include
6. #include
7. #include
8. #include
9. #include
10. #include
11. #include
12. #include "mapinteraction.h"
14. class MapInteraction;
16. QT_BEGIN_NAMESPACE
17. namespace Ui {
18. class Widget;
19. }
20. QT_END_NAMESPACE
22. class Widget : public QWidget
23. {
24. Q_OBJECT
26. public:
27. Widget(QWidget *parent = nullptr);
28. ~Widget();
29. QWebChannel *webchanle;
30. QWebEngineView *mainMap_view;
31. QVBoxLayout *layout;
32. MapInteraction *mapInteraction;
33. private:
34. Ui::Widget *ui;
35. };
36. #endif // WIDGET_H

好了。qt内部的工作做完了接下来是html。

html中我首先是去高德示例中心中找到了一个基础的示例代码是鼠标点击获得经纬度。在这个基础上增加了鼠标点击出现图标和图标之间连线。这两个功能我就不给大家介绍了，因为我也不懂。这部分工作都是GPT帮助做的。我主要介绍一下html里面与qt通信相关的工作。

首先去qt的安装目录里搜索qwebchannel.js。把这个文件复制到qt'的资源文件夹里

第二部在html文件里添加这个文件 

好了然后就可以开始了。

首先存储经纬度我们需要一个全局的数组变量。var position = [];

需要一个与qt通信相关的变量var qtChannel;

在鼠标点击的函数里获取经纬度并把数据传给qt

然后再定义一个window.onload 事件。当html页面的资源文件加载完成时。调用这个函数去访问qt是否存在并建立一个通道与qt进行通信。

至此。html与qt的基础通信就做好了。我把我的html完整代码贴出来大家如果懂一点html的话可以参考一下

1. html>
2. <html>
3. <head>
4. <meta charset="utf-8">
5. <meta http-equiv="X-UA-Compatible" content="IE=edge">
6. <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
7. <title>鼠标拾取地图坐标title>
8. <link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css" />
9. <script type="text/javascript" src="https://cache.amap.com/lbs/static/addToolbar.js">script>
10. head>
11. <style type="text/css">
12. html, body {
13. width: 100%;
14. height: 100%;
15. margin: 0px;
16. }
18. .map {
19. height: 100%;
20. width: 100%;
21. float: left;
22. }
23. style>
24. <body>
25. <div id="container" class="map">div>
26. <div class="input-card">
27. <h4>左击获取经纬度：h4>
28. <div class="input-item">
29. <input type="text" readonly="true" id="lnglat">
30. div>
31. div>
33. <script src="https://webapi.amap.com/maps?v=2.0&key=您的key值&plugin=AMap.Autocomplete">script>
34. <script src="./qwebchannel.js">script>
35. <script type="text/javascript">
36. var markers = [];
37. var position = [];
38. var polyline;
39. var qtChannel;
40. var map = new AMap.Map("container", {
41. resizeEnable: true,
42. zoom: 11,
43. });
44. // 用线连接所有标记点的函数
45. function connectMarkers() {
46. var polylinePoints = markers.map(function (marker) {
47. return marker.getPosition();
48. });
49. // 清除现有的折线
50. if (polyline) {
51. polyline.setMap(null);
52. polyline = null;
53. }
54. // 检查是否有多个标记点
55. if (polylinePoints.length > 1) {
56. // 创建连接标记点的折线
57. polyline = new AMap.Polyline({
58. path: polylinePoints,
59. strokeColor: "#3366FF", // 线的颜色
60. strokeOpacity: 1, // 线的透明度
61. strokeWeight: 15, // 线的宽度
62. map: map
63. });
64. }
65. }
66. function deleteMarker(index) {
67. if (index >= 0 && index < markers.length) {
68. markers[index].setMap(null); // 从地图上移除标记点
69. markers.splice(index, 1); // 从数组中移除标记点
71. // 更新连接的线
72. if (markers.length > 1) {
73. if (polyline) {
74. // 清除现有的折线
75. polyline.setMap(null);
76. polyline = null; // 将对象设置为 null，释放内存
77. }
78. // 重新连接标记点
79. connectMarkers();
80. } else if (markers.length === 1) {
81. // 如果只剩一个点，清除折线
82. if (polyline) {
83. polyline.setMap(null);
84. polyline = null;
85. }
86. }
87. }
88. }
90. map.on('click', function (e) {
91. // 在点击位置创建标记
92. document.getElementById("lnglat").value = e.lnglat.getLng() + ',' + e.lnglat.getLat()
93. var marker = new AMap.Marker({
94. icon: "https://a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png",
95. anchor: 'bottom-center', // 设置锚点在图标底部中心
96. position: e.lnglat,
97. map: map
98. });
99. // 将标记添加到某个数组，以便后续引用
100. markers.push(marker);
101. // 连接标记点
102. connectMarkers();
103. position = {
104. latitude: e.lnglat.getLat(),
105. longitude: e.lnglat.getLng()
106. };
107. qtChannel.mapInteraction.handleMapClick(position);
108. });
110. window.onload = function () {
111. if (typeof qt != 'undefined') {
112. new QWebChannel(qt.webChannelTransport, function (channel) {
113. qtChannel = channel.objects;
114. });
115. } else {
116. alert("qt对象获取失败！");
117. }
118. };
120. function getMarkerFromPosition(position) {//找到最近标记点的索引号
121. var minDistance = Infinity;
122. var closestMarker = null;
123. markers.forEach(function (marker) {
124. var distance = marker.getPosition().distance(position);
125. if (distance < minDistance) {
126. minDistance = distance;
127. closestMarker = marker;
128. }
129. });
130. return closestMarker;
131. }
132. map.on('rightclick', function (e) {
133. // 获取右键点击位置的标记
134. var clickedMarker = getMarkerFromPosition(e.lnglat);
135. // 删除指定标记
136. if (clickedMarker) {
137. deleteMarker(markers.indexOf(clickedMarker));
138. }
139. });
141. script>
142. body>
143. html>

这份代码里有部分功能我没做介绍因为包括鼠标点击添加坐标点和坐标点连线，坐标点删除和删除后重新连线的功能，所以可能看着比较杂乱，各位可以配合着刚刚的截图和代码一起分析。（记得Key值填自己的）祝各位工作顺利。下次再见。