Ｑｔ使用百度的离线地图

最新推荐文章于 2025-05-19 15:49:13 发布

十启树

最新推荐文章于 2025-05-19 15:49:13 发布

阅读量1.6k

点赞数 11

CC 4.0 BY-SA版权

分类专栏： Qt 技术文章标签： qt 百度

本文链接：https://blog.csdn.net/A185822153/article/details/134874398

Qt 技术专栏收录该内容

39 篇文章

订阅专栏

使用百度离线地图，一下载百度离线包（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>

四，Ｑｔ与页面交互

与上一篇的Ｑｔ使用百度在线地图方法２实现方面一样。

因为本人不是专业做地图这一块，很多功能还需要你们自己挖掘。不过注意放大级别越大，需要的瓦片越多，导致程序安装包也会变的很大很大。本例追享的瓦片只支持放大到９级。