QT QWebEngineView加载百度地图

Qt5.5之后使用新的QWebEngineView代替了之前的QWebKit，加载数据的方式也由同步变成了异步。所以访问网站页面和加载HTML页面都需要使用QWebEngineView类。

项目要求在程序中显示地图，并能够通过串口接收无人机上图传里的GPS实时传回来的经纬度，并在地图上画出无人机的飞行轨迹。由于需要在QT中加载百度地图，所以需要用QWebEngineView进行QT与HTML/JavaScript的交互，在HTML文件中调用百度地图的API显示地图和地图上的一些控件。因为要实时显示无人机的位置并画出飞行轨迹，所以还需要能够在QT程序中调用HTML中的JS代码，显示位置画出轨迹。

由于是公司的项目，不方便把完整代码传上来，这里只贴出加载百度地图，并调用JS中函数的方法的代码，做一个记录，仅供参考。

 

---

效果

 

---

代码之路

一、添加QWebEngineView类

要安装QT的时候选择安装QWebEngineView才可以使用，使用时需要在pro文件中加入：

    QT       += webenginewidgets

二、添加QWebEngineView组件 

在QT提供的控件中是找不到QWebEngineView组件的，我们使用的时候其实是把一个QWidgets组件提升为QWebEngineView的，先在ui界面拖入一个QWidgets组件，在右边的对象中找到它，右键选择提升为

三、使用QWebEngineView加载HTML文件

组件提升为QWebEngineView后，我们就可以用它来加载HTML文件，并在其中显示

    QString htmlPath = "你的html文件的路径";
    ui->widget->load(QUrl(htmlPath));

四、在QT中调用HTML中的函数

    // command为调用的函数，revealMarker为函数名，可以带参数
    QString command = QString("revealMarker(%1,%2)").arg("参数1").arg("参数2");
    ui->widget->page()->runJavaScript(command);

五、HTML文件