寫在前面
歡迎訪問我的博客
- 如果需要使用百度地圖javasript api,需先進(jìn)行開發(fā)者認(rèn)證，balalalala寫上一堆理由之后認(rèn)證就行，然后創(chuàng)建瀏覽器端的應(yīng)用，得到可用的Ak，詳情見百度地圖開放平臺。
- 假設(shè)你會一些簡單的地圖API應(yīng)用，不會的話請移步這里API應(yīng)用示例。
- 本文能做的就是用QT把一些點(diǎn)經(jīng)緯度傳給JS，并且按順序繪制軌跡，在首尾加上標(biāo)注。
QT
在mainwindow.cpp中修改槽函數(shù)：
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}; //表示兩個(gè)點(diǎn)的經(jīng)緯度
int i=0;
for(i=0;i<2;i++) //將數(shù)組傳入壓入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); //再轉(zhuǎn)為QString
QString num2Json(num2_byteArray); //再轉(zhuǎn)為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 //默認(rèn)街道圖
}
var map = new BMap.Map("allmap",mapOptions); // 創(chuàng)建Map實(shí)例 命名空間為BMAP
map.centerAndZoom(new BMap.Point(114.0, 30.0), 5); // 初始化地圖,設(shè)置中心點(diǎn)坐標(biāo)和地圖級別
map.setCurrentCity("武漢"); // 設(shè)置地圖顯示的城市
map.enableScrollWheelZoom(true); //開啟鼠標(biāo)滾輪縮放
function showhello()
{
//alert("Welcome, newbird ");
var string= "hello oldbird";
ReinforcePC.showinfo(string);//調(diào)用qt中的showinfo函數(shù)
}
function showarray(numlist,num2list) //僅把qt傳來的數(shù)組轉(zhuǎn)換成可用的list
{
//alert(numlist);
var num_list,num2_list; //以下為格式轉(zhuǎn)換，分割成可用的數(shù)組
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 = []; //為軌跡做準(zhǔn)備，把所有的點(diǎn)扔里面，但不對每個(gè)點(diǎn)標(biāo)注
for(i=0;i<num_list.length;i++)
{
point= new BMap.Point(num_list[i],num2_list[i]);
tracelist.push(point); //將每個(gè)點(diǎn)壓入數(shù)組
}
var polyline =new BMap.Polyline(tracelist, {
enableEditing: false,//是否啟用線編輯，默認(rèn)為false
enableClicking: false,//是否響應(yīng)點(diǎn)擊事件，默認(rèn)為true
strokeWeight:'4',//折線的寬度，以像素為單位
strokeOpacity: 0.8,//折線的透明度，取值范圍0 - 1
strokeColor:"red" //折線顏色
});
map.addOverlay(polyline); //增加折線
map.centerAndZoom(tracelist[num_list.length-1], 15);
//首尾加上標(biāo)注點(diǎn)
var marker = new BMap.Marker(tracelist[0]); // 創(chuàng)建點(diǎn)
map.addOverlay(marker); // 加載標(biāo)注
var marker = new BMap.Marker(tracelist[num_list.length-1]); // 創(chuàng)建點(diǎn)
map.addOverlay(marker); // 加載標(biāo)注
}
</script>
結(jié)果
-
初始化
初始化 -
2點(diǎn)(我也不知道這是哪。。。)
2點(diǎn) - 3點(diǎn)
在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++) //將數(shù)組傳入壓入num_json
{
num_json.append(num[i]);
num2_json.append(num2[i]);
}
結(jié)果：
3點(diǎn)
- n點(diǎn)
n點(diǎn)
因此，你要你有一系列的經(jīng)緯度，就能很容易的繪制出軌跡，那怎么得到這些經(jīng)緯度呢，見NMEA解析。
可能有不正確的地方，敬請諒解，如果覺得對您有所幫助，請打賞一下唄，謝謝~
碼字不易，轉(zhuǎn)載請注明地址
