Ｑｔ 使用百度的离线地图

原创2024-02-18 13:57·十启树之一起加油加油

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

四，Ｑｔ与页面交互

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

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

举报
评论 0
    热门：