离线百度地图,QT添加按钮点击切换卫星地图和街道地图
一 、首先,需要在自己的map.html文件内添加:
var bdmapcfg;
// 切换地图类型
function satemap()
{
//百度地图api配置
bdmapcfg = {
'home':'../../baidumapv2/', //api主目录
'imgext':'.jpg', //瓦片地图后缀
'tiles_dir':'../../baidumapv2/satellite' //瓦片图目录
};
bdmapcfg.tiles_dir="../../baidumapv2/satellite";
loadJScript();
}
function normalmap()
{
//百度地图api配置
bdmapcfg = {
'home':'../../baidumapv2/', //api主目录
'imgext':'.png', //瓦片地图后缀
'tiles_dir':'../../baidumapv2/roadmap' //瓦片图目录
};
bdmapcfg.tiles_dir="../../baidumapv2/roadmap";
loadJScript();
}
//百度地图api功能
function loadJScript()
{
var script = document.createElement("script");
script.type = "text/javascript";
script.src = "../../baidumapv2/baidumap_offline_v2_20160921_min.js";
document.body.appendChild(script);
//异步加载增加代码
window.BMap=window.BMap||{};
window.BMap.apiLoad = function(){
delete window.BMap.apiLoad;
if(typeof init == "function")
{
init();
}
}
}
function init()
{
var lon = 116.403694,lat = 39.914271;
var onlinemap = new OnlineMap(lon,lat,"map_demo");
onlinemap.init();
}
//异步加载地图
window.onload = loadJScript;
二、QT中添加两个QRadioButton,用来切换地图类型:
connect(ui->radioButton,SIGNAL(clicked(bool)),this,SLOT(checkMapType()));
connect(ui->radioButton_2,SIGNAL(clicked(bool)),this,SLOT(checkMapType()));
void MainWindow::checkMapType()
{
if(ui->radioButton->isChecked())
{
QString command = QString("normalmap()");
ui->widget->page()->runJavaScript(command);
}
else if(ui->radioButton_2->isChecked())
{
QString command = QString("satemap()");
ui->widget->page()->runJavaScript(command);
}
}
三、最后还需要添加一个js文件:
mapControl.js :
function OnlineMap( lon, lat, dom, mapType) {
debugger;
var isShow = false;
var t1;
//地图上加载一个要素
function addCircle() {
remove_overlay();
var SW = new BMap.Point(lon - 0.022146, lat - 0.018801);
var NE = new BMap.Point(lon + 0.022317, lat + 0.018025);
groundOverlayOptions = {
opacity : 0.3,
displayOnMinLevel : 13,
displayOnMaxLevel : 18
}
// 初始化GroundOverlay
var groundOverlay = new BMap.GroundOverlay(new BMap.Bounds(SW, NE),
groundOverlayOptions);
// 设置GroundOverlay的图片地址
groundOverlay.setImageURL("images/leida_white.gif");
map.addOverlay(groundOverlay);
}
//清除覆盖物
function remove_overlay() {
map.clearOverlays();
}
//自动刷新要素信息
function refreshFlyInfo() {
var level = map.getZoom();
if (level < 13) {
//remove_overlay();
isShow = false;
//window.clearInterval(t1);
} else {
isShow = true;
}
if (isShow) {
addCircle();
}
}
OnlineMap.prototype.init = function(mapType) {
map = "";
map = new BMap.Map(dom,{enableMapClick:false}); // 创建Map实例
point = new BMap.Point(lon, lat);
map.centerAndZoom(point, 18);
map.setMaxZoom(21);
if(mapType){map.setMapType(mapType);}
map.enableScrollWheelZoom(); //启用滚轮放大缩小
t1 = window.setInterval(function() {
refreshFlyInfo();
}, 3000);
map.addEventListener("zoomend", function() {
window.clearInterval(t1);
if (this.getZoom() < 13) {
//remove_overlay();
} else {
for (var i = 0; i < map.getOverlays().length; i++) {
map.getOverlays()[i].show();
}
t1 = window.setInterval(function() {
refreshFlyInfo();
}, 1000);
addCircle();
}
});
addCircle();
}
//显示点图标和文字信息
OnlineMap.prototype.pointsInfo = function(flyInfo) {
addCircle();
if (flyInfo.length > 0) {
for (var i = 0; i < flyInfo.length; i++) {
var point1 = new BMap.Point(Number(flyInfo[i].x),
Number(flyInfo[i].y));
var marker = new BMap.Marker(point1); // 创建标注
marker.setTop(true);
var icon = new BMap.Icon("images/fly.png",
new BMap.Size(80, 80));
var iconshaow = new BMap.Icon("/images/fly_shadow.png", new BMap.Size(50, 50));
marker.setIcon(icon);
marker.setZIndex(100);
marker.setShadow(iconshaow);
if (map.getZoom() >= 13) {
map.addOverlay(marker); // 将标注添加到地图中
}
var label = new BMap.Label(flyInfo[i].message, {
offset : new BMap.Size(20, -10)
});
marker.setLabel(label);
}
}
}
}
对了,别忘了在map.html中添加:
这是加载mapControl.js的路径
<script type="text/javascript" src="../mapControl.js"></script>