zoukankan      html  css  js  c++  java
  • 离线百度地图,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>
    


  • 相关阅读:
    明明已经include_once() 但还是报错Class 'XXXXXControllerTOPData' not found
    dell U2515H 2k显示器黑屏问题,dp线问题。
    centos7.4 php5升级到php7
    thinkphp批量插入 更新sql
    查询速度慢了10倍,查询条件类型不对,字符串当做数字类型。
    margin-left:auto;margin-right:auto; 不起作用的原因
    jquery 查找元素,id,class
    php分割url,获取参数query
    阿里云服务器删除日志的方法,查看有哪些大文件
    sql优化 分字段统计查询
  • 原文地址:https://www.cnblogs.com/ruandahua/p/14074366.html
Copyright © 2011-2022 走看看