Qt实现百度地图API的调用——物体轨迹的设计、插入、删除、保存、读取，使用QWebEngineView实现地图网页的显示

最近做项目需要使用Qt调用百度地图API。目前已经实现了这个要求，所以写下此文章，进行一个分享，顺便记录一下自己的一些学习内容，以便后续进一步的学习。

Qt使用的编译环境是Qt5.14.0的MSVC2015 32bit的Release，当然Debug也可以实现此功能，别的版本的编译器我还没有尝试过。js文件使用的编译器为IntelliJ IDEA2020，百度地图API的版本为3.0。地图显示框架是使用QWebEngineView。下面进行正式的介绍。

首先介绍一下我分享的项目中实现的功能：①通过鼠标点击描绘出物体的运动轨迹，包括增加点和点之间的连线。②通过点击“删除”按键，实现特定点和点信息的删除。③通过点击“插入”按键，实现特定点和点信息的插入。④通过点击“保存”按键，将轨迹上的所有点和点信息保存为txt文档。⑤通过点击“读取轨迹文件”按键，从选定的txt文件中读取轨迹的点，并显示出来。

ps：也可以实现轨迹的实时显示，由于时间关系我没有加进来，不过用到的原理和分享的文件中增加点、线的程序一样。

我使用的API为离线地图的API，如果想使用在线版本的，只需要替换为百度地图API在线版本的即可。

实现Qt与百度地图API的沟通主要依靠js文件，比如分享的文件夹中的qwebchannel。关于分享的文件夹中的文件信息已经在ReadMe.txt中进行了详细地说明。js程序中也进行了详细的说明。这些注释可以帮助你们更好地理解每一个语句的作用和功能。这个已经是目前比较成熟的版本了，基本上运行没有大的问题和bug，可以直接移植到项目中，并进行修改。

下面看一下运行的效果图：

①初始运行的界面。

②点击鼠标左键生成轨迹，将鼠标放在点的标注上就可以显示点的经纬度信息。这些轨迹点都是可以拖拽的，并且拖拽后的点的坐标信息也会自动更新。

③点击“删除”按键，运行的界面和效果。

④点击“插入”按键的运行界面和效果图。

⑤点击“保存”按键，保存下来的txt文件如图所示。

⑥点击“读航迹文件”按键，选择上面保存的txt文件，读出的轨迹图如图所示。

右下角的四个按键都是通过在js文件中直接写程序显示的，如果要通过Qt按键实现也是可以的，只要做好Qt的按键程序和API的沟通就可以。

Qt主要是通过下面这段代码建立起与API的联系。在使用时，需要修改js文件的路径，也就是QDir temDir("MAP/MapShow/MapShow.html")。修改为自己的路径就可以正常调用。

void MainWindow::MapIni()
{
    mainMap_view=new QWebEngineView(this);
    mainMap_view->setParent(ui->MapWeb);

    channel = new QWebChannel(this);   //创建通道对象用于与JS交互
    Route *myRoute=new Route();        //创建通道对象用于与JS交互
    channel->registerObject("Route",(QObject*)myRoute);
    mainMap_view->page()->setWebChannel(channel);

    QDir temDir("MAP/MapShow/MapShow.html");
    QString absDir = temDir.absolutePath();
    QString filePath = "file:///" + absDir;
    mainMap_view->page()->load(QUrl(filePath));
}

Qt调用js文件中的函数主要通过下面这两个语句实现的。js文件中有名为accept_ReadData的函数，通过runJavaScript进行调用。js文件调用Qt函数是通过Route_js.ReadRoute()这种语句调用Qt中的ReadRoute()函数的。

QString SendDataCmd = QString("accept_ReadData(%0,%1,%2,%3)").arg(RouteRead[i].id)
                                                     .arg(RouteRead[i].lon)
                                                     .arg(RouteRead[i].lat)
                                                     .arg(RouteRead[0].num);
mainMap_view->page()->runJavaScript(SendDataCmd);

由于程序较多，只写出两段最关键的程序，其他的程序就不再一一赘述，直接点击链接去CSDN的资源里去下载：Qt5.14.0实现百度地图API的调用，使用QWebEngineView实现地图网页的显示_qt调用地图,qt显示百度地图-QT文档类资源-CSDN下载。

这个是百度网盘的资源，需要的也可以去下载。链接：网盘链接
提取码：zzkf。要是失效了可以联系我我再补充。

使用过程中遇到什么问题，欢迎随时交流。转载请说明。