qt与js交互,并在百度地图上绘制轨迹

前言:
获得了照片的GPS信息后,我们现在要做的就是把GPS信息传入JS中,然后通过百度地图API将轨迹绘制出来。

一:在程序页面加载地图
qt5.6及之后取消了QWebkits,转为使用QWebEngine.

在qt5.6的额ui设计师界面中,并不能直接找到QWebView,如果没有这个ui组件,我们就无法将浏览器嵌入到我们的程序中,就无法加载地图了,所以第一步我们要弄出一个类似的组件,在这里我使用了QWebEngineView。

QWebEngineView使用widget组件,拖拉出来是一个透明的组件,对着组件按右键->promote to.. ->选择QWebEngineView(没有的话手动输入QWebEngineView),如图所示。

这样我们便能通过ui组件来加载地图了。

ui->widget->load(QUrl("qrc:/map/map.html"));//也可以填本地html文件地址
ui->widget->show();

这样就可以看到地图了。

二:将GPS信息传入JS
在ui设计师界面拖一个button,然后转到槽,在mainwindow.cpp中这样写这个槽函数。

void MainWindow::on_buttonDraw_clicked()
{
    ui->stackedWidget->setCurrentIndex(0);

    QJsonArray num_json, num2_json;//声明QJsonArray
    QJsonDocument num_document, num2_document;  //将QJSonArray改为QJsonDocument类
    QByteArray num_byteArray, num2_byteArray;

    double num[50];
    double num2[50];
    for(int i =0;i//result为保存照片信息的对象,详情请参考上一篇博客
        num2[i] = result[i].GeoLocation.Latitude;
    }

    for(int i=0; i//将数组传入num_json
    {
        num_json.append(num[i]);
        num2_json.append(num2[i]);
    }

    num_document.setArray(num_json);
    num2_document.setArray(num2_json);

    num_byteArray = num_document.toJson(QJsonDocument::Compact);
    num2_byteArray = num2_document.toJson(QJsonDocument::Compact);

    QString numJson(num_byteArray);//再转为QString
    QString num2Json(num2_byteArray);

    QString cmd = QString("showarray(\"%1\",\"%2\",\"%3\")").arg(numJson).arg(num2Json);
    ui->widget->page()->runJavaScript(cmd);//传给javascript
}

就不详细解释了,代码里有注释
html文件参考如下:


<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <style type="text/css">
    body, html,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微软雅黑";}
    style>
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=替换成你自己的AK ">script>
    <title>基于GPS的位置追踪及地理围栏title>
head>
<body>
    <div id="allmap">div>
body>
html>
<script type="text/javascript">
////地图初始化

var mapOptions={

                minZoom: 3,                 //最小级别
                maxZoom:19,                 //最大级别
                mapType:  BMAP_NORMAL_MAP   //默认街道图
              }

var map = new BMap.Map("allmap",mapOptions);        // 创建Map实例 命名空间为BMAP
map.centerAndZoom(new BMap.Point(114.0, 30.0), 5);  // 初始化地图,设置中心点坐标和地图级别
map.setCurrentCity("武汉");          // 设置地图显示的城市
map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放


function showhello()
{
    //alert("Welcome, newbird ");
    var string= "hello oldbird";
    ReinforcePC.showinfo(string);//调用qt中的showinfo函数
}

function showarray(numlist,num2list)                    //仅把qt传来的数组转换成可用的list
{
    //alert(numlist);
    var num_list,num2_list;                         //以下为格式转换,分割成可用的数组
    num_list = numlist.substring(1,numlist.length-1);
    num2_list = num2list.substring(1,num2list.length-1);
    num_list = num_list.split(",");
    num2_list = num2_list.split(",");
    //alert("the num_list is: "+num_list[0]+" "+num_list[1]);

    var tracelist = [];     //为轨迹做准备,把所有的点扔里面,但不对每个点标注
    for(i=0;inew BMap.Point(num_list[i],num2_list[i]);
        tracelist.push(point);                                  //将每个点压入数组
    }

    var polyline =new BMap.Polyline(tracelist, {
    enableEditing: false,//是否启用线编辑,默认为false
    enableClicking: false,//是否响应点击事件,默认为true
    strokeWeight:'4',//折线的宽度,以像素为单位
    strokeOpacity: 0.8,//折线的透明度,取值范围0 - 1
    strokeColor:"red" //折线颜色
    });
    map.addOverlay(polyline);          //增加折线
    map.centerAndZoom(tracelist[num_list.length-1], 15);

    //首尾加上标注点
    var marker = new BMap.Marker(tracelist[0]); // 创建点
    map.addOverlay(marker);                 // 加载标注
    var marker = new BMap.Marker(tracelist[num_list.length-1]); // 创建点
    map.addOverlay(marker);                 // 加载标注

}
script>

这样我们便实现了把照片的在轨迹上绘制出来

你可能感兴趣的:(行程记录)