前言：
获得了照片的GPS信息后，我们现在要做的就是把GPS信息传入JS中，然后通过百度地图API将轨迹绘制出来。
一：在程序页面加载地图
qt5.6及之后取消了QWebkits,转为使用QWebEngine.
在qt5.6的额ui设计师界面中，并不能直接找到QWebView，如果没有这个ui组件，我们就无法将浏览器嵌入到我们的程序中，就无法加载地图了，所以第一步我们要弄出一个类似的组件，在这里我使用了QWebEngineView。
QWebEngineView使用widget组件，拖拉出来是一个透明的组件，对着组件按右键->promote to.. ->选择QWebEngineView（没有的话手动输入QWebEngineView），如图所示。
这样我们便能通过ui组件来加载地图了。
1
2
| ui->widget->load(QUrl("qrc:/map/map.html"));//也可以填本地html文件地址
ui->widget->show();
|
这样就可以看到地图了。
二：将GPS信息传入JS
在ui设计师界面拖一个button，然后转到槽，在mainwindow.cpp中这样写这个槽函数。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
| 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<len;i++)
{
num[i] = result[i].GeoLocation.Longitude;//result为保存照片信息的对象，详情请参考上一篇博客
num2[i] = result[i].GeoLocation.Latitude;
}
for(int i=0; i<length; 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文件参考如下：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
| <!DOCTYPE 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;i<num_list.length;i++)
{
point= new 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>
|
这样我们便实现了把照片的在轨迹上绘制出来
