qt與js互動，並在百度地圖上繪製軌跡
阿新 • • 發佈：2018-12-09
前言： 獲得了照片的GPS資訊後，我們現在要做的就是把GPS資訊傳入JS中，然後通過百度地圖API將軌跡繪製出來。
一：在程式頁面載入地圖 qt5.6及之後取消了QWebkits,轉為使用QWebEngine.
在qt5.6的額ui設計師介面中，並不能直接找到QWebView，如果沒有這個ui元件，我們就無法將瀏覽器嵌入到我們的程式中，就無法載入地圖了，所以第一步我們要弄出一個類似的元件，在這裡我使用了QWebEngineView。
QWebEngineView使用widget元件，拖拉出來是一個透明的元件，對著元件按右鍵->promote to.. ->選擇QWebEngineView（沒有的話手動輸入QWebEngineView），如圖所示。
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 就不詳細解釋了，程式碼裡有註釋 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>這樣我們便實現了把照片的在軌跡上繪製出來