基于Qt实现百度地图路径规划功能

一、环境配置

1. 项目依赖

c 复制代码

// .pro文件配置
QT += webenginewidgets webchannel
LIBS += -lQt5WebEngineCore -lQt5WebChannel

2. 百度地图API配置

html 复制代码

<!-- map.html -->
<script src="http://api.map.baidu.com/api?type=webgl&v=3.0&ak=YOUR_API_KEY"></script>
<script src="qwebchannel.js"></script>

二、核心代码实现

1. Qt端界面设计

c 复制代码

// mainwindow.h
class MainWindow : public QMainWindow {
    Q_OBJECT
public:
    MainWindow(QWidget *parent = nullptr);
    
private slots:
    void onPlanRoute();
    void handleRouteResult(const QString &points);

private:
    QWebEngineView *m_webView;
    QWebChannel *m_channel;
};

2. 地图初始化

c 复制代码

// mainwindow.cpp
MainWindow::MainWindow(QWidget *parent) : QMainWindow(parent) {
    m_webView = new QWebEngineView(this);
    m_channel = new QWebChannel(this);
    
    // 设置通信对象
    m_channel->registerObject("mapBridge", this);
    m_webView->page()->setWebChannel(m_channel);
    
    // 加载地图页面
    m_webView->setUrl(QUrl("qrc:/map/map.html"));
    setCentralWidget(m_webView);
}

// 地图控件初始化
void initMap() {
    QString js = R"(
        var map = new BMapGL.Map("container");
        map.centerAndZoom(new BMapGL.Point(116.404, 39.915), 14);
        map.enableScrollWheelZoom(true);
        
        // 注册Qt回调
        new QWebChannel(qt.webChannelTransport, function(channel) {
            window.qtBridge = channel.objects.mapBridge;
        });
    )";
    m_webView->page()->runJavaScript(js);
}

3. 路径规划实现

c 复制代码

// 路径规划请求
void MainWindow::onPlanRoute() {
    QString startLng = ui->startLng->text();
    QString startLat = ui->startLat->text();
    QString endLng = ui->endLng->text();
    QString endLat = ui->endLat->text();
    
    QString js = QString(R"(
        var driving = new BMapGL.DrivingRoute(map, {
            renderOptions: { map: map, autoViewport: true }
        });
        driving.search(new BMapGL.Point(%1, %2), new BMapGL.Point(%3, %4));
        driving.setSearchCompleteCallback(function(results) {
            if (driving.getStatus() == BMAP_STATUS_SUCCESS) {
                var points = [];
                var route = results.getPlan(0).getRoute(0);
                for(var i=0; i<route.getNumSteps(); i++) {
                    points.push(route.getStep(i).getPath());
                }
                qtBridge.handleRouteResult(JSON.stringify(points));
            }
        });
    )").arg(startLng).arg(startLat).arg(endLng).arg(endLat);
    
    m_webView->page()->runJavaScript(js);
}

// 处理路径结果
void MainWindow::handleRouteResult(const QString &points) {
    QJsonDocument doc = QJsonDocument::fromJson(points.toUtf8());
    QJsonArray pathPoints = doc.array();
    
    QPainterPath path;
    for(auto point : pathPoints) {
        QPointF p = point.toObject()["lng"].toDouble(), 
                point.toObject()["lat"].toDouble());
        path.lineTo(p);
    }
    
    // 在地图上绘制路径
    QString drawJs = QString("addPolyline(%1)").arg(path.toString());
    m_webView->page()->runJavaScript(drawJs);
}

三、JavaScript交互层

1. 路径绘制函数

c 复制代码

// map.html
function addPolyline(points) {
    var path = [];
    points.forEach(function(p) {
        path.push(new BMapGL.Point(p.lng, p.lat));
    });
    
    var polyline = new BMapGL.Polyline(path, {
        strokeColor: "#FF0000",
        strokeWeight: 5,
        strokeOpacity: 0.8
    });
    map.addOverlay(polyline);
}

2. 坐标转换接口

c 复制代码

// 实现WGS84转BD09坐标
function convertCoords(lng, lat) {
    var point = new BMapGL.Point(lng, lat);
    return BMapGL.convertor.translate(point, 1);
}

四、界面布局示例

c 复制代码

<!-- mainwindow.ui -->
<widget class="QMainWindow" name="MainWindow">
    <layout class="QGridLayout">
        <item row="0" column="0">
            <QLineEdit placeholderText="起点经度"/>
        </item>
        <item row="0" column="1">
            <QLineEdit placeholderText="起点纬度"/>
        </item>
        <item row="1" column="0">
            <QLineEdit placeholderText="终点经度"/>
        </item>
        <item row="1" column="1">
            <QLineEdit placeholderText="终点纬度"/>
        </item>
        <item row="2" column="0" colspan="2">
            <QPushButton text="规划路径" clicked="onPlanRoute"/>
        </item>
    </layout>
</widget>

五、关键调试技巧

坐标验证：

c 复制代码

console.log("起点坐标：", new BMapGL.Point(116.404, 39.915));

路径可视化调试：

c 复制代码

map.addOverlay(new BMapGL.Marker(new BMapGL.Point(116.404, 39.915)));

网络请求监控：

c 复制代码

connect(m_webView->page(), &QWebEnginePage::networkRequestFinished,
        [](QNetworkReply* reply){
            qDebug() << "请求状态：" << reply->url() << reply->error();
        });

六、扩展功能实现

1. 实时路径更新

c 复制代码

// 定时刷新路径
QTimer *timer = new QTimer(this);
connect(timer, &QTimer::timeout, [=]{
    m_webView->page()->runJavaScript("updatePath()");
});
timer->start(1000);

2. 路径优化算法

c 复制代码

// 道路平滑处理
QString smoothJs = R"(
    var points = [];
    for(var i=0; i<path.length-1; i++) {
        var p1 = path[i], p2=path[i+1];
        for(var t=0; t<=10; t++) {
            var x = p1.lng + (p2.lng-p1.lng)*t/10;
            var y = p1.lat + (p2.lat-p1.lat)*t/10;
            points.push(new BMapGL.Point(x, y));
        }
    }
    return points;
)";

参考代码基于QT的百度地图开发。实现简单的路径规划功能 www.youwenfan.com/contentcsj/69896.html

七、完整工程结构

复制代码

MapApp/
├── Src/
│   ├── main.cpp
│   ├── mainwindow.cpp
│   └── mapengine.cpp
├── Res/
│   ├── html/
│   │   ├── map.html
│   │   └── qwebchannel.js
│   └── styles/
├── CMakeLists.txt
└── .pro