qt 使用百度在线地图 方法2

使用百度在线地图两个关键点,一是html页面准备;二是qt 与js 语言的交互。

1,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>基于GPS的位置追踪及地理围栏</title>
    <style type="text/css">
    	body, html,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微软雅黑";}
                p{margin-left:5px; font-size:14px;}
    </style>
	<script src="./qwebchannel.js"></script> 
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=FoLM5Y9oQWzihtXGq5cmCMZsC7ElrrLw"></script>
</head>
    <body>
    <div id="allmap"></div>
<script type="text/javascript">
// 百度地图API功能
    //地图初始化
    var map = new BMap.Map("allmap");
   
    var navigationControl = new BMap.NavigationControl({
      anchor: BMAP_ANCHOR_TOP_LEFT,
      type: BMAP_NAVIGATION_CONTROL_LARGE,
      enableGeolocation: true
      });
    map.addControl(navigationControl);            // 添加平移缩放控件
    map.addControl(new BMap.ScaleControl());      // 添加比例尺控件
    var overviewControl = new BMap.OverviewMapControl({anchor:BMAP_ANCHOR_BOTTOM_RIGHT,isOpen:true});
    map.addControl(overviewControl);              // 添加缩略图控件控件
    var mapType1 = new BMap.MapTypeControl({anchor: BMAP_ANCHOR_TOP_RIGHT,mapTypes:[BMAP_NORMAL_MAP,BMAP_HYBRID_MAP]});
    map.addControl(mapType1);                     // 添加地图类型控件
    map.enableScrollWheelZoom();   //启用滚轮放大缩小,默认禁用
    //map.enableContinuousZoom();    //启用地图惯性拖拽,默认禁用
    map.enableKeyboard();          //启用键盘移动地图
    map.enableDragging();          //启用地图拖拽
    map.enableDoubleClickZoom();   //启用双击放大
	//map.setMapType(BMAP_HYBRID_MAP);
    map.centerAndZoom(new BMap.Point(55.000883333 , 50.234851667), 5);
	map.setCurrentCity("长沙");
</script>

</html>

2,qt 与js 语言的交互

qt 端加载html页面。注册相应通道

    m_map = new QWebEngineView(this);

	QWebChannel *pWebChannel = new QWebChannel(m_map->page());      //为网页视图页面创建通道channel
	pInteractObj = new TInteractObj(this);    //创建通道对象用于与JS交互
	//"interactObj"为注册名,JS调用的对象名必须和它相同
	pWebChannel->registerObject(QStringLiteral("interactObj"), pInteractObj);//注册通道对象供JS调用

	m_map->page()->setWebChannel(pWebChannel);  /设置通道



	//当网页返回数据,则会返回到通道对象pInteractObj中,然后再发送信号到主类OnReceiveMessageFromJS中处理
	connect(pInteractObj, &TInteractObj::SigReceivedMessFromJS, this, &MapLoaction::OnReceiveMessageFromJS);
	
	//向网页发送信号需要利用通道对象pInteractObj的SigSendMessageToJS信号
	connect(this, &MapLoaction::SigSendMessageToJS, pInteractObj, &TInteractObj::SigSendMessageToJS);

	QWebEnginePage *page = m_map->page();
	page->load(QUrl("file:///./testData/map.html"));
	//map->resize(1000, 1000);
	ui.gridLayout_pos->addWidget(m_map);
	m_map->show();

html 页面中调用 qt函数

window.onload = function() {  
            new QWebChannel(qt.webChannelTransport, function(channel) 
			{    //浏览器内核自带
                var interactObj = channel.objects.interactObj;      //注册对象名
               // alert("success1");
               
                //Web connect the Qt signal, then Qt can call "output" function
                interactObj.SigSendMessageToJS.connect(function(fun,lng,lati,strdev,dg) 
				{    
					//alert(lng+"  success:"+lati);
					if(fun==0)
						updateDataTrail(lng,lati);
					else
					{
						x_point=lng;
						y_point=lati;
						//clearAllMarker();
						myAddMarker(strdev);
					}
                    //if(str == "ok")
					//{	
						//alert("success");
						//interactObj.JSSendMessage(1,2);           //发送消息
					//}
                });    
            });  
            }  

最终效果,本图片为我们实际应用中的一个效果图。

相关推荐
Re.不晚4 分钟前
Java入门15——抽象类
java·开发语言·学习·算法·intellij-idea
老秦包你会6 分钟前
Qt第三课 ----------容器类控件
开发语言·qt
凤枭香9 分钟前
Python OpenCV 傅里叶变换
开发语言·图像处理·python·opencv
ULTRA??13 分钟前
C加加中的结构化绑定(解包,折叠展开)
开发语言·c++
远望清一色29 分钟前
基于MATLAB的实现垃圾分类Matlab源码
开发语言·matlab
confiself39 分钟前
大模型系列——LLAMA-O1 复刻代码解读
java·开发语言
XiaoLeisj1 小时前
【JavaEE初阶 — 多线程】Thread类的方法&线程生命周期
java·开发语言·java-ee
杜杜的man1 小时前
【go从零单排】go中的结构体struct和method
开发语言·后端·golang
幼儿园老大*1 小时前
走进 Go 语言基础语法
开发语言·后端·学习·golang·go
半桶水专家1 小时前
go语言中package详解
开发语言·golang·xcode