離線百度地圖,QT新增按鈕點選切換衛星地圖和街道地圖
阿新 • • 發佈:2020-12-02
首先,需要在自己的map.html檔案內新增:
var bdmapcfg; // 切換地圖型別 function satemap() { //百度地圖api配置 bdmapcfg = { 'home':'../../baidumapv2/', //api主目錄 'imgext':'.jpg', //瓦片地圖字尾 'tiles_dir':'../../baidumapv2/satellite' //瓦片圖目錄 }; bdmapcfg.tiles_dir="../../baidumapv2/satellite"; loadJScript(); } function normalmap() { //百度地圖api配置 bdmapcfg = { 'home':'../../baidumapv2/', //api主目錄 'imgext':'.png', //瓦片地圖字尾 'tiles_dir':'../../baidumapv2/roadmap' //瓦片圖目錄 }; bdmapcfg.tiles_dir="../../baidumapv2/roadmap"; loadJScript(); } //百度地圖api功能 function loadJScript() { var script = document.createElement("script"); script.type = "text/javascript"; script.src = "../../baidumapv2/baidumap_offline_v2_20160921_min.js"; document.body.appendChild(script); //非同步載入增加程式碼 window.BMap=window.BMap||{}; window.BMap.apiLoad = function(){ delete window.BMap.apiLoad; if(typeof init == "function") { init(); } } } function init() { var lon = 116.403694,lat = 39.914271; var onlinemap = new OnlineMap(lon,lat,"map_demo"); onlinemap.init(); } //非同步載入地圖 window.onload = loadJScript;
QT中新增兩個QRadioButton,用來切換地圖型別:
connect(ui->radioButton,SIGNAL(clicked(bool)),this,SLOT(checkMapType()));
connect(ui->radioButton_2,SIGNAL(clicked(bool)),this,SLOT(checkMapType()));
void MainWindow::checkMapType() { if(ui->radioButton->isChecked()) { QString command = QString("normalmap()"); ui->widget->page()->runJavaScript(command); } else if(ui->radioButton_2->isChecked()) { QString command = QString("satemap()"); ui->widget->page()->runJavaScript(command); } }
最後還需要新增一個js檔案:
mapControl.js :
function OnlineMap( lon, lat, dom, mapType) { debugger; var isShow = false; var t1; //地圖上載入一個要素 function addCircle() { //remove_overlay(); //var SW = new BMap.Point(lon - 0.022146, lat - 0.018801); //var NE = new BMap.Point(lon + 0.022317, lat + 0.018025); /*groundOverlayOptions = { opacity : 0.3, displayOnMinLevel : 13, displayOnMaxLevel : 18 }*/ // 初始化GroundOverlay //var groundOverlay = new BMap.GroundOverlay(new BMap.Bounds(SW, NE), //groundOverlayOptions); // 設定GroundOverlay的圖片地址 //groundOverlay.setImageURL("images/leida_white.gif"); //map.addOverlay(groundOverlay); } //清除覆蓋物 function remove_overlay() { //map.clearOverlays(); } //自動重新整理要素資訊 function refreshFlyInfo() { var level = map.getZoom(); if (level < 13) { //remove_overlay(); isShow = false; //window.clearInterval(t1); } else { isShow = true; } if (isShow) { addCircle(); } } OnlineMap.prototype.init = function(mapType) { map = ""; map = new BMap.Map(dom,{enableMapClick:false}); // 建立Map例項 point = new BMap.Point(lon, lat); map.centerAndZoom(point, 18); map.setMaxZoom(21); if(mapType){map.setMapType(mapType);} map.enableScrollWheelZoom(); //啟用滾輪放大縮小 /*t1 = window.setInterval(function() { refreshFlyInfo(); }, 3000);*/ map.addEventListener("zoomend", function() { //window.clearInterval(t1); if (this.getZoom() < 13) { //remove_overlay(); } else { /*for (var i = 0; i < map.getOverlays().length; i++) { map.getOverlays()[i].show(); }*/ t1 = window.setInterval(function() { refreshFlyInfo(); }, 1000); addCircle(); } }); addCircle(); } //顯示點圖示和文字資訊 /*OnlineMap.prototype.pointsInfo = function(flyInfo) { addCircle(); if (flyInfo.length > 0) { for (var i = 0; i < flyInfo.length; i++) { var point1 = new BMap.Point(Number(flyInfo[i].x), Number(flyInfo[i].y)); var marker = new BMap.Marker(point1); // 建立標註 marker.setTop(true); var icon = new BMap.Icon("images/fly.png", new BMap.Size(80, 80)); var iconshaow = new BMap.Icon("/images/fly_shadow.png", new BMap.Size(50, 50)); marker.setIcon(icon); marker.setZIndex(100); marker.setShadow(iconshaow); if (map.getZoom() >= 13) { map.addOverlay(marker); // 將標註新增到地圖中 } var label = new BMap.Label(flyInfo[i].message, { offset : new BMap.Size(20, -10) }); marker.setLabel(label); } } }*/ }
對了,別忘了在map.html中新增:
這是載入mapControl.js的路徑
<script type="text/javascript" src="../mapControl.js"></script>