使用百度离线地图,一下载百度离线包(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级。