使用百度離線地圖,一下載百度離線包(offlinemap);二是準備地圖瓦片(不同級別的瓦片);三 準備html主頁面;四,Qt與頁面交互。
1,百度離線包?
鏈接:https://pan.baidu.com/s/1XyzAChKKhY_XOxAsypKLyQ?
提取碼:1234
2,地圖部分瓦片,鏈接:https://pan.baidu.com/s/1dQ409qhtmjIXjk9Hj4Fjiw?
提取碼:1234。如果要更多,可以自己在這個網站下載?望遠網-百度地圖下載,不過有些級別(放大縮小級別)下載不了,需要會員。
3,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" /><title>百度地圖離線API V2.1 www.xiaoguo123.com</title><style type="text/css">body, html,#allmap, #tab, #mapfrm {width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微軟雅黑";}#menu{max-height:600px;overflow-y:auto}#menu ul{padding:0; padding-left:10px;margin:0}td{font-size:14px;background-color: #f7f9fd;}h3{margin:0}h4{margin:0;}#mapfrm{border:0}/**設置滾動條的樣式**/::-webkit-scrollbar {width: 10px;}/**滾動槽**/::-webkit-scrollbar-track {box-shadow: inset 0 0 6px #d1cfcf; border-radius: 10px;}/**滾動條滑塊**/::-webkit-scrollbar-thumb {border-radius: 12px;background: #f7f7f7; -webkit-box-shadow: inset 0 0 6px #d1cfcf; }::-webkit-scrollbar-thumb:window-inactive {background: rgba(245,245,245,0.4); }</style><script type="text/javascript" src="offlinemap_demo/jquery.js"></script><script type="text/javascript" src="qrc:///map/qwebchannel.js"></script> <script type="text/javascript">function updateData(x,y){window.location.href='offlinemap_demo/demo/7_6.html';console.log("---x2:"+x+"----y2:"+y);}</script><script type="text/javascript">function output(message){var output = document.getElementById("output");output.innerHTML =output.innerHTML+message+"\n";}window.onload = function(){//window.location.href='offlinemap_demo/demo/7_6.html';//output("install webchanncel");/*new QWebChannel(qt.webChannelTransport,function(channel){var interactObj = channel.objects.interactObj;document.getElementById("send").onclick=function(){var input = document.getElementById("Input");if(!input.value){return;}output(input.value);interactObj.recvStringSlot(input.value);input.value ="";}interactObj.sendStringSignal.connect(function(str){output("Received Str" + str);});interactObj.recvStringSlot("Client connected ,準備發送數據");})*/}</script></head>
<body>
<table id="tab" border="0"><tr><td valign="top" height="100%"><iframe class="" unselectable="on" name="mapfrm" id="mapfrm" src="offlinemap_demo/demo/7_6.html"></iframe></td></tr></table>
</body></html>
四,Qt與頁面交互
與上一篇的 Qt使用百度在線地圖方法2實現方面一樣。
因為本人不是專業做地圖這一塊,很多功能還需要你們自己挖掘。不過注意放大級別越大,需要的瓦片越多,導致程序安裝包也會變的很大很大。本例追享的瓦片只支持放大到9級。