GPS坐标显示在百度地图上（Qt+百度地图）

Qt在5.6以后的版本就不支持webview控件了，这里我用的是Qt5.4的版本，里面还有这个控件；

下面简单介绍下Qt与html中的javascript调用交互过程；

 

一、整体实现介绍
在html中，通过javascript调用百度地图API（这里需要申请成为百度地图开放API开发者，很好申请的），来显示地图；
qt调用javascript方法，来传递GPS坐标信息，通过javascript的方法，

把经纬度坐标传递给百度地图，显示出位置

 

二、上代码

首先是javascript和html代码，这个文件直接通过浏览器打开，就可以看到地图了：

这里大部分代码是百度地图API的demo里的。

这里的

doLocal(longitude, latitude)

就是留给Qt调用的方法；

下面是qt的实现；qt的比较简单的：

1、界面

通过qtcreater，画个简单的界面：

主要webview控件，我这边做了个tcp监听，用于做批量gps数据输入用的；

 

2、代码实现

这里主要介绍与调用javascript有关的代码，tcp监听的不做介绍了；

下面是html文件路径，初始化给webview

    QFileInfo xmlinfo("./test.html");

    connect(ui->webView->page()->mainFrame(), SIGNAL(javaScriptWindowObjectCleared()),
                this, SLOT(addObjectToJs()));

    ui->webView->load(QUrl::fromLocalFile(xmlinfo.absoluteFilePath()));

调用javascript接口，送gps数据：

通过

evaluateJavaScript

调用javascript的接口：

void testWebMap::on_modifyButton_clicked()
{
    QString longitude=ui->longitude->text();
    QString latitude=ui->latitude->text();

 
    convertGpsData(latitude,latitude,2);
    convertGpsData(longitude,longitude,3);

 
    QString fun=QString("doLocal(\"%1\",\"%2\");").arg(longitude).arg(latitude);

 
    qDebug()<<"longitude: "<webView->page()->mainFrame()->evaluateJavaScript(fun);
}

源代码也上传到csdn上了，供大家参考:https://download.csdn.net/download/wuquan_1230/10295999

 

上个效果图：

下面是带有轨迹的回放：

 

个人微信服务号同步推送文章（微信公众号：fensnote）：