文章目录

前言

一、获取百度地图API密钥

二、代码内容

1.baidumap.html文件

2.QT端代码

2.1mainwindow.cpp

2.2 bridge.cpp

2.3 mapclient.cpp

---

---

前言

这份代码依赖opencv，我安装的是opencv4，在.pro中将自己的安装的opencv头文件和库的路径给更改了

INCLUDEPATH += /usr/include/opencv4
LIBS +=  -L/usr/lib/x86_64-linux-gnu/ -lopencv_core -lopencv_highgui -lopencv_videoio -lopencv_imgproc -lopencv_imgcodecs

还需要用到百度地图的API，需要到百度官网去获取密钥。

代码：

通过网盘分享的文件：qt_baidumap.zip
链接: https://pan.baidu.com/s/1UHp9Jyxaf1eigAaW-4hTFw?pwd=y8nm 提取码: y8nm

效果

一、获取百度地图API密钥

进入百度地图开放平台官网，在搜索框中输入密钥，点击后跳转页面，按照指引注册账户、创建应用、获取密钥

在baidumap.html中填入你的密钥

二、代码内容

1.baidumap.html文件

baidumap.html 是这个项目的前端地图页面，作用可以概括成三层：

• 用百度地图 API 渲染地图和覆盖物（点、线、图标、轨迹）

• 处理用户交互（点击加点、拖拽、缩放、触摸手势）

• 通过 qwebchannel.js 和 Qt/C++ 双向通信（JS 调 C++，C++ 信号回调 JS）

关键函数说明

add_Point(x, y)	在地图上加一个可拖拽标记点，并带序号标签；拖拽结束会触发 updatePolyline() 重算区域轮廓。
updatePolyline()	核心函数之一。把当前所有点连成红色闭合多边形，同时计算外接矩形（蓝框），并调用 addPointCenter() 标出中心点。
deletePoint() / removeMarker() / removeAllMarkers() / recoverMarkers()	点位管理函数：删除最后一个点、清空点、恢复点（用于截图或临时显示切换场景）。
checkPolyon()	“确认区域”逻辑：先把视角聚焦到中心，再把每个点同时转成像素坐标和经纬度发给 Qt： bridge_js.getCoveragePath_coor(pixel.x, pixel.y) bridge_js.getCoveragePath_lng_lat(pt.lng, pt.lat)
addPathPoint(lng, lat)	用于“车辆轨迹”显示：把输入坐标转 BD09 后加入路径，更新车辆 marker 和红色轨迹线。
addPlannerPathPoint_x_y(x, y)	把屏幕像素坐标转地图点（pixelToPoint），用于显示规划路径（蓝线）。
addPlannerPathPoint(lng, lat)	直接用经纬度追加规划路径（蓝线）。
localPoint(lng, lat)	做坐标系转换后，把地图中心跳到该点，并把转换结果回传给 Qt。
dealSigScreenshot()	响应 Qt 发来的截图信号，延时调用 bridge_js.getSigScreenShot("hyx")，然后恢复标记/线条状态。

与QT交互：

通过new QWebChannel(qt.webChannelTransport, function(channel) { ... })与window.bridge_js = channel.objects.bridge_name;建立桥接，可以利用bridge_js往QT端发数据；比如：

JS向QT端发送数据：bridge_js.getCoordinate(point.lng, point.lng);

会调用到QT代码中的getCoordinate()函数，该函数位于bridge.cpp下；

再比如baidumap.html中调用bridge_js.getCoveragePath_lng_lat(pt.lng, pt.lat);就会调用到QT端的void bridge::getCoveragePath_lng_lat(QString lng, QString lat)函数；

QT向JS发送数据：

QString js = QString("addPlannerPathPoint_x_y(%1,%2)").arg(tra[i][j].x()).arg(tra[i][j].y());
m_view->page()->runJavaScript(js);

向JS中的function addPlannerPathPoint_x_y(x , y)函数发送数据；

2.QT端代码

2.1mainwindow.cpp

        ①创建 QWebEngineView，用 load() 打开 baidumap.html，把地图页嵌进窗口里。

        ②建立 JS ↔ C++ 通道，QWebChannel 注册 bridge_name → bridge 实例，和网页里 window.bridge_js = channel.objects.bridge_name 对应；

        ③通过信号槽机制实现一些数据的收发：

        mapClient：sig_lng_lat → map_addPathPoint（在网页里画轨迹）；               bridge：sig_send_coord / sig_send_lng_lat → PathCoverageWidget 的槽（覆盖路径规划用的坐标）。

        ④通过 m_view->page()->runJavaScript(...)，例如：

        “定位”按钮：localPoint(经度, 纬度)

        收到外部经纬度：addPathPoint(lng, lat)

        路径规划结果：addPlannerPathPoint_x_y(x, y)、cleanPathPoint()

2.2 bridge.cpp

bridge 继承 QObject，在 mainwindow 里注册成 bridge_name，网页通过 bridge_js.xxx(...) 调的就是这里的 public slots。

主要槽：

槽	作用
getCoordinate(lon, lat)	网页把坐标（或其它字符串）传上来，目前只 qDebug()。
getCoveragePath_coor(x, y)	多边形“确定区域”后，网页传像素坐标，转成 int 后 emit sig_send_coord，给 PathCoverageWidget。
getCoveragePath_lng_lat(lng, lat)	传经纬度，转成 double 后 emit sig_send_lng_lat。
err(QString)	网页报错信息，目前只打日志。

信号（给 Qt 侧用）：
deletePoint、checkPolyon 等由 MainWindow 里 emit mybride->... 触发，网页里对它们 connect，相当于 C++ → JS。

2.3 mapclient.cpp

这个主要是通过TCP与其他进程通信的，用处不大。