Qt5.5之后使用新的QWebEngineView代替了之前的QWebKit，加載數據的方式也由同步變成了異步。所以訪問網站頁面和加載HTML頁面都需要使用QWebEngineView類。
項目要求在程序中顯示地圖，並能夠通過串口接收無人機上圖傳里的GPS實時傳回來的經緯度，並在地圖上畫出無人機的飛行軌跡。由於需要在QT中加載百度地圖，所以需要用QWebEngineView進行QT與HTML/JavaScript的交互，在HTML文件中調用百度地圖的API顯示地圖和地圖上的一些控件。因為要實時顯示無人機的位置並畫出飛行軌跡，所以還需要能夠在QT程序中調用HTML中的JS代碼，顯示位置畫出軌跡。
由於是公司的項目，不方便把完整代碼傳上來，這里只貼出加載百度地圖，並調用JS中函數的方法的代碼，做一個記錄，僅供參考。
效果
代碼之路
一、添加QWebEngineView類
要安裝QT的時候選擇安裝QWebEngineView才可以使用，使用時需要在pro文件中加入：
QT += webenginewidgets二、添加QWebEngineView組件
在QT提供的控件中是找不到QWebEngineView組件的，我們使用的時候其實是把一個QWidgets組件提升為QWebEngineView的，先在ui界面拖入一個QWidgets組件，在右邊的對象中找到它，右鍵選擇提升為
三、使用QWebEngineView加載HTML文件
組件提升為QWebEngineView后，我們就可以用它來加載HTML文件，並在其中顯示
QString htmlPath = "你的html文件的路徑";
ui->widget->load(QUrl(htmlPath));四、在QT中調用HTML中的函數
// command為調用的函數，revealMarker為函數名，可以帶參數
QString command = QString("revealMarker(%1,%2)").arg("參數1").arg("參數2");
ui->widget->page()->runJavaScript(command);五、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" />
<title>基於GPS的位置追蹤及地理圍欄</title>
<style type="text/css">
body, html,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微軟雅黑";}
p{margin-left:5px; font-size:14px;}
</style>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=你自己在百度地圖官網申請的秘鑰"></script>
</head>
<body>
<div id="allmap"></div>
</body>
</html>
<script type="text/javascript">
// 百度地圖API功能
//地圖初始化
var map = new BMap.Map("allmap");
map.centerAndZoom(new BMap.Point(116.404, 39.915), 5);
var navigationControl = new BMap.NavigationControl({
anchor: BMAP_ANCHOR_TOP_LEFT,
type: BMAP_NAVIGATION_CONTROL_LARGE,
enableGeolocation: true
});
map.addControl(navigationControl); // 添加平移縮放控件
map.addControl(new BMap.ScaleControl()); // 添加比例尺控件
var overviewControl = new BMap.OverviewMapControl({anchor:BMAP_ANCHOR_BOTTOM_RIGHT,isOpen:true});
map.addControl(overviewControl); // 添加縮略圖控件控件
var mapType1 = new BMap.MapTypeControl({anchor: BMAP_ANCHOR_TOP_RIGHT,mapTypes:[BMAP_NORMAL_MAP,BMAP_HYBRID_MAP]});
map.addControl(mapType1); // 添加地圖類型控件
map.enableScrollWheelZoom(); //啟用滾輪放大縮小，默認禁用
//map.enableContinuousZoom(); //啟用地圖慣性拖拽，默認禁用
map.enableKeyboard(); //啟用鍵盤移動地圖
map.enableDragging(); //啟用地圖拖拽
map.enableDoubleClickZoom(); //啟用雙擊放大
//顯示GPS經緯度坐標查詢的點
function revealMarker(lon,lat) {
}
//清除地圖上標注的點
function deletePoint(){
}
//坐標轉換完之后的回調函數
translateCallback = function (data) {
if(data.status === 0) {
}
//把qt傳過來的參數加入到數組中
function addPoint(longitude, latitude) {
}
//濾波函數
function filter() {
}
</script>