使用百度离线地图，一下载百度离线包（offlinemap）；二是准备地图瓦片（不同级别的瓦片）；三 准备ｈｔｍｌ主页面；四，Ｑｔ与页面交互。
１，百度离线包
链接：https://pan.baidu.com/s/1XyzAChKKhY_XOxAsypKLyQ
提取码：1234
２，地图部分瓦片，链接：https://pan.baidu.com/s/1dQ409qhtmjIXjk9Hj4Fjiw
提取码：1234。如果要更多，可以自己在这个网站下载 望远网-百度地图下载，不过有些级别（放大缩小级别）下载不了，需要会员。
３，ｈｔｍｌ主页面
代码：
<!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>四，Ｑｔ与页面交互
与上一篇的 Ｑｔ使用百度在线地图方法２实现方面一样。
因为本人不是专业做地图这一块，很多功能还需要你们自己挖掘。不过注意放大级别越大，需要的瓦片越多，导致程序安装包也会变的很大很大。本例追享的瓦片只支持放大到９级。
