QT+HTML+JS百度离线地图--连接qt并移植到麒麟系统

侧岭灵风

已于 2024-08-24 23:07:17 修改

阅读量1.2k

点赞数 17

分类专栏： QT 文章标签： qt 开发语言

于 2024-08-24 23:04:16 首次发布

本文链接：https://blog.csdn.net/weixin_44741151/article/details/141505351

版权

QT 专栏收录该内容

5 篇文章

订阅专栏

毕竟目标是在软件里显示，所以还是要和qt结合起来使用，并且这是个国产化项目所以还需要移植到麒麟系统。我这边使用的麒麟系统是麒麟国防版V10。

一.html连接qt

1.html文件位置

先说一下qt加载html，html文件需要放在哪，如下图

html目录需要放在构建目录下，之后在qt负责加载地图的类中设置html读取路径，获取绝对路径。

// 设置 HTML 文件路径
    QString mapPath = QDir::currentPath() + "/Map/jinmenMap.html";
    m_webView->setUrl(QUrl::fromLocalFile(mapPath));

2.在qt中显示地图

接下来，我们来讨论如何在 Qt 中显示 HTML 界面。

首先，需要在 .pro 文件中添加两个模块：webengine 和 webenginewidgets。

webengine：

该模块包含了 Qt WebEngine 的核心功能，基于 Chromium 项目，提供了一个现代的网页浏览器引擎。它允许在 Qt 应用程序中嵌入和显示网页内容（包括 HTML、CSS、JavaScript 等）。

webenginewidgets：

该模块基于 webengine，提供了一组用于在 Qt Widget 界面中嵌入网页的控件，如 QWebEngineView。webenginewidgets 使得你可以轻松地将网页嵌入到标准的 Qt 窗口部件中，并与 Qt 的其他控件进行交互。

注意版本：我使用的是 Qt 5.15.2 + VS2019，使用 Qt 5.12.2 + VS2017 也是可以的，但需要注意使用 MSVC 编译器，否则没有 webengine 组件。此外，webengine 组件在安装 Qt 时需要在组件列表中手动勾选，默认是未勾选的。

之后，我们可以在 Qt 中显示地图。我创建了一个 createMap 类，专门用于显示 HTML 界面，并创建了相应的 .h、.cpp 和 .ui 文件。

创建一个widget对象，地图将会在widget对象上显示，并将其提升为QWebEngineView

在头文件中加入#include <QWebEngineView>，在.cpp中并显示地图

QWebEngineView *m_webView;
m_webView = ui->createMap;

// 设置 HTML 文件路径
QString mapPath = QDir::currentPath() + "/Map/jinmenMap.html";
m_webView->setUrl(QUrl::fromLocalFile(mapPath));

// 调整 webView 大小以适应父窗口
m_webView->setSizePolicy(QSizePolicy::Expanding, QSizePolicy::Expanding);
m_webView->setZoomFactor(1.0);

在 main 函数中，可以将展示 mainwindow.ui 窗口的 w.show(); 修改为展示 createMap.ui 窗口，以测试是否能够正常显示。

我希望实现的效果是 MainWindow 作为主窗口，可以查看 createMap 的缩略图，且缩略图能够放大至全屏，全屏状态下也能缩小回缩略图。无论是缩略图还是全屏状态下，都应能够使用 HTML 的所有功能。

下面是放大和缩小按钮的槽函数代码，缩小按钮设计在了 createMap.ui 下。放大按钮的功能无需赘述，缩小按钮通过信号槽通知主窗口处理缩小逻辑。

//放大窗口按钮槽函数
void MainWindow::on_amplifyMap_clicked()
{
    QApplication::setOverrideCursor(Qt::WaitCursor);

    ui->thumbnailView->hide();

    m_createMap->setParent(this);
    m_createMap->hide();
    m_createMap->setWindowFlags(Qt::FramelessWindowHint | Qt::WindowStaysOnTopHint);

    QSize parentSize = this->size();
    QPoint parentCenter = QPoint(parentSize.width() / 2, parentSize.height() / 2);

    m_createMap->resize(parentSize);

    m_createMap->show();

    m_createMap->raise();
    m_createMap->activateWindow();

    QApplication::restoreOverrideCursor();
    ui->amplifyMap->setEnabled(false);
}

// 缩小按钮槽函数
void MainWindow::slot_reduceMap()
{

    QApplication::setOverrideCursor(Qt::WaitCursor);

    m_createMap->setParent(ui->thumbnailView);
    m_createMap->resize(ui->thumbnailView->size());
    m_createMap->move(0, 0);

    m_createMap->show();
    ui->thumbnailView->show();
    ui->amplifyMap->setEnabled(true);

    // 增加延迟，以确保缩略图大小已经稳定
    QTimer::singleShot(100, [=]() {
        QApplication::restoreOverrideCursor();
    });
}

最后在mainwindow中加入初始化地图调用即可。

void MainWindow::initMap()
{
    if (!m_createMap) {
        m_createMap = new createMap(this);
        m_createMap->setWindowFlags(Qt::FramelessWindowHint | Qt::WindowStaysOnTopHint);
        m_createMap->setParent(this);
    }

    m_createMap->resize(ui->thumbnailView->size()); // 调整大小
    m_createMap->move(ui->thumbnailView->pos());    // 调整位置
    m_createMap->show();
    ui->thumbnailView->show();                      // 重新显示缩略图视图
}

二,麒麟系统移植

之后就是把代码移植到麒麟系统中，首先，html代码是使用原生html+js写的，没有用任何框架，所以这一点在平台移植上会比较方便。麒麟系统和linux系统很接近，但是网上对于麒麟系统的描述很少，尤其是解决问题方面。麒麟系统的qt使用的是gcc编译器，也拥有webengine 和 webenginewidgets模块，但是直接把代码放上去的话会报错，内容为：

libQt5WebEngineCore.so: .dynsym local symbol at index 3 (>= sh_info of 3)
libQt5WebEngineCore.so: .dynsym local symbol at index 4 (>= sh_info of 3)
libQt5WebEngineCore.so: .dynsym local symbol at index 5 (>= sh_info of 3)
libQt5WebEngineCore.so: .dynsym local symbol at index 6 (>= sh_info of 3)

这里直接说解决方法：

sudo ln -sf /usr/bin/x86_64-linux-gnu-ld.gold /usr/bin/ld

好了，解决了，移植完成，其实并没出太多太难解决的问题，随着开发可能会出现更多问题，等到时候都会说。

后续的文章将会讲述如何在地图中绘制点线、设置图片、测距，以及实现 Qt 与 JavaScript 之间的数据传递等功能。