写在前面
欢迎访问我的博客
- 如果需要使用百度地图javasript api,需先进行开发者认证，balalalala写上一堆理由之后认证就行，然后创建浏览器端的应用，得到可用的Ak，详情见百度地图开放平台。
- 假设你会一些简单的地图API应用，不会的话请移步这里API应用示例。
- 本文能做的就是用QT把一些点经纬度传给JS，并且按顺序绘制轨迹，在首尾加上标注。
QT
在mainwindow.cpp中修改槽函数：
void MainWindow::on_pushButton_clicked()
{
QJsonArray num_json,num2_json; //声明QJsonArray
QJsonDocument num_document,num2_document; //将QJsonArray改为QJsonDocument类
QByteArray num_byteArray,num2_byteArray; //
double num[2]={114.12,114.13}; //随便打的
double num2[2]={30.12,30.13}; //表示两个点的经纬度
int i=0;
for(i=0;i<2;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
//qDebug() << numJson;
QWebFrame *webFrame = ui->webView->page()->mainFrame();
QString cmd = QString("showarray(\"%1\",\"%2\")").arg(numJson).arg(num2Json);
webFrame->evaluateJavaScript(cmd); //传给javascript
}
html
<!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>
结果
-
初始化
初始化 -
2点(我也不知道这是哪。。。)
2点 - 3点
在QT中做如下修改：
double num[3]={114.12,114.13,114.14}; //随便打的
double num2[3]={30.12,30.13,30.11};
int i=0;
for(i=0;i<3;i++) //将数组传入压入num_json
{
num_json.append(num[i]);
num2_json.append(num2[i]);
}
结果：
3点
- n点
n点
因此，你要你有一系列的经纬度，就能很容易的绘制出轨迹，那怎么得到这些经纬度呢，见NMEA解析。
可能有不正确的地方，敬请谅解，如果觉得对您有所帮助，请打赏一下呗，谢谢~
码字不易，转载请注明地址
