Qt在5.6以后的版本就不支持webview控件了，这里我用的是Qt5.4的版本，里面还有这个控件；

下面简单介绍下Qt与html中的javascript调用交互过程；

一、整体实现介绍

在html中，通过javascript调用百度地图API（这里需要申请成为百度地图开放API开发者，很好申请的），来显示地图；

qt调用javascript方法，来传递GPS坐标信息，通过javascript的方法，

把经纬度坐标传递给百度地图，显示出位置

二、上代码

首先是javascript和html代码，这个文件直接通过浏览器打开，就可以看到地图了：

这里大部分代码是百度地图API的demo里的。

<!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" />

    <style type="text/css">

        body, html,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微软雅黑";}

    </style>

    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=填上你自己的百度应用AK"></script>

    <title>GPS转百度</title>

</head>

<body>

    <div id="allmap"></div>

</body>

</html>

<script type="text/javascript">

    // 百度地图API功能

    //地图初始化

    var bm = new BMap.Map("allmap");

    bm.centerAndZoom("郑州", 12);

    bm.addControl(new BMap.NavigationControl()); // 添加平移缩放控件

	//bm.addControl(new BMap.ScaleControl());                    // 添加比例尺控件

	bm.enableScrollWheelZoom();   //启用滚轮放大缩小，默认禁用

	bm.enableContinuousZoom();    //启用地图惯性拖拽，默认禁用

	var sy = new BMap.Symbol(BMap_Symbol_SHAPE_BACKWARD_OPEN_ARROW, {

		scale: 0.6,//图标缩放大小

		strokeColor:'#fff',//设置矢量图标的线填充颜色

		strokeWeight: '2',//设置线宽

	});

	var icons = new BMap.IconSequence(sy, '10', '30');	

var polyline;

var flag = 0;

function  drowLine(point)

{

	if (flag)

	{

		//alert(flag);

		polyline.setPath(point);

	}

	else

	{

		   flag = 1;

		   polyline =new BMap.Polyline(point, {

		   //enableEditing: false,//是否启用线编辑，默认为false

		   //enableClicking: true,//是否响应点击事件，默认为true

		   //icons:[icons],

		   strokeWeight:'3',//折线的宽度，以像素为单位

		   strokeOpacity: 0.8,//折线的透明度，取值范围0 - 1

		   strokeColor:"#18a45b" //折线颜色

		});

		bm.addOverlay(polyline);

	}

}

var marker;

    //坐标转换完之后的回调函数

    translateCallback = function (data){

      if(data.status === 0) {

		if (marker)

		{

			marker.setPosition(data.points[0]);

			poisArray.push(data.points[0]);

			drowLine(poisArray);

			if ( poisArray.length >= 10000)	 //防止内存一直增加，会卡，大于1w条时，清空一下

			{

				poisArray=[];

				poisArray.push(data.points[0]);

			}

		}

		else

		{

			poisArray.push(data.points[0]);

			marker = new BMap.Marker(data.points[0]);

			bm.addOverlay(marker);

		}

        bm.setCenter(data.points[0]);

      }

    }

var polylineAttr = [];

var poisArray = [];

function doLocal(longitude, latitude)  //给qt调用的接口

{

	var OPoint = new BMap.Point(longitude,latitude);

	var convertor = new BMap.Convertor();

	var pointArr = [];

	pointArr.push(OPoint);

	convertor.translate(pointArr, 1, 5, translateCallback);

}

</script>

这里的

doLocal(longitude, latitude)

就是留给Qt调用的方法；

下面是qt的实现；qt的比较简单的：

1、界面

通过qtcreater，画个简单的界面：

主要webview控件，我这边做了个tcp监听，用于做批量gps数据输入用的；

2、代码实现

这里主要介绍与调用javascript有关的代码，tcp监听的不做介绍了；

下面是html文件路径，初始化给webview

    QFileInfo xmlinfo("./test.html");

    connect(ui->webView->page()->mainFrame(), SIGNAL(javaScriptWindowObjectCleared()),

                this, SLOT(addObjectToJs()));

    ui->webView->load(QUrl::fromLocalFile(xmlinfo.absoluteFilePath()));

调用javascript接口，送gps数据：

通过

evaluateJavaScript

调用javascript的接口：

void testWebMap::on_modifyButton_clicked()

{

    QString longitude=ui->longitude->text();

    QString latitude=ui->latitude->text();

 

    convertGpsData(latitude,latitude,2);

    convertGpsData(longitude,longitude,3);

 

    QString fun=QString("doLocal(\"%1\",\"%2\");").arg(longitude).arg(latitude);

 

    qDebug()<<"longitude: "<<longitude<<", latitude: "<<latitude ;

    qDebug()<<"fun: "<<fun ;

 

    ui->webView->page()->mainFrame()->evaluateJavaScript(fun);

}

源代码也上传到csdn上了，供大家参考:https://download.csdn.net/download/wuquan_1230/10295999

上个效果图：

下面是带有轨迹的回放：

个人微信服务号同步推送文章（微信公众号：fensnote）：

GPS坐标显示在百度地图上（Qt+百度地图）的更多相关文章

  1. 通过百度地图API将百度坐标转换成GPS经纬度

    百度地图API链接:http://developer.baidu.com/map/index.php?title=webapi/guide/changeposition 百度地图API中,有GPS坐标 ...

  2. GPS获取坐标 显示Google map偏差计算

    用手机获取GPS坐标 显示在手机地图偏差大约在100-200米左右,我把坐标放在 Maps.google.com 搜索坐标定位则相当精确. 可能是.....为了安全吧故意加的偏差 不过可以计算偏差使位 ...

  3. CAD数据分块，偏移校准，加载到百度地图、高德地图、谷歌等地图上

    前面分享过一篇如何将CAD海量数据显示在百度地图上(百度地图Canvas实现十万CAD数据秒级加载),但是很多开发者在CAD数据提取时遇到了问题,所以接下来的文章将介绍如何将CAD数据提取. 准备软件 ...

  4. vue 实现高德坐标转GPS坐标

    vue 实现高德坐标转GPS坐标 首先介绍一下常见的几种地图的坐标类型: WGS-84:这是一个国际标准,也就是GPS坐标(Google Earth.或者GPS模块采集的都是这个类型). GCJ-02 ...

  5. H5端调起百度地图、腾讯地图app

    来自一个需求的总结: 在微信公众号中根据地图上的marker和label,或者搜索结果点击调起地图APP进行导航. 一开始是使用百度地图进行开发,后面转腾讯是因为微信不允许不是自家或者合作方的APP在 ...

  6. html5定位并在百度地图上显示

    在开发移动端 web 或者webapp时,使用百度地图 API 的过程中,经常需要通过手机定位获取当前位置并在地图上居中显示出来,这就需要用到html5的地理定位功能. navigator.geolo ...

  7. html5定位获取当前位置并在百度地图上显示

    用html5的地理定位功能通过手机定位获取当前位置并在地图上居中显示出来,下面是百度地图API的使用过程,有需要的朋友可以参考下 在开发移动端 web 或者webapp时,使用百度地图 API 的过程 ...

  8. 通过百度地图API显示当前位置在地图上（图标显示）--第三方开源--百度地图（二）

    1.下载百度地图的demo,下载地址:http://lbsyun.baidu.com/sdk/download?selected=mapsdk_basicmap,mapsdk_searchfuncti ...

  9. 【百度地图API】如何在地图上添加标注？——另有：坐标拾取工具+打车费用接口介绍

    原文:[百度地图API]如何在地图上添加标注?--另有:坐标拾取工具+打车费用接口介绍 摘要: 在这篇文章中,你将学会,如何利用百度地图API进行标注.如何使用API新增的打车费用接口. ------ ...

随机推荐

  1. 为什么通常在发送数据埋点请求的时候使用的是 1x1 像素的透明 gif 图片？

    避免跨域(img 天然支持跨域) 利用空白gif或1x1 px的img是互联网广告或网站监测方面常用的手段,简单.安全.相比PNG/JPG体积小,1px 透明图,对网页内容的影响几乎没有影响,这种请求 ...

  2. CVE-2020-0796 漏洞复现

    漏洞介绍 2020年3月10日,微软在其官方SRC发布了CVE-2020-0796的安全公告(ADV200005,MicrosoftGuidance for Disabling SMBv3 Compr ...

  3. 网易实战分享｜云信IM SDK接口设计实践

    引语 IM (Instant Messaging)是网络上最流行的通信方式,与日常生活息息相关.IM软件也层出不穷,例如:微信.QQ.易信等.通过多年深耕和技术沉淀,云信产出了一套成熟稳定的IM SD ...

  4. (五)学习了解OrchardCore笔记——灵魂中间件ModularTenantContainerMiddleware的第一行②模块的功能部分

    在(三)的时候已经说到模块集合用ForEachAsync的扩展方法分配多个任务,把每个modules的ManifestInfo分析出来的功能加入ConcurrentDictionary.我们先看看这个 ...

  5. 【Nginx】如何为已安装的Nginx动态添加模块？看完我懂了！！

    写在前面 很多时候,我们根据当时的项目情况和业务需求安装完Nginx后,后续随着业务的发展,往往会给安装好的Nginx添加其他的功能模块.在为Nginx添加功能模块时,要求Nginx不停机.这就涉及到 ...

  6. Kite: 一个分布式微服务框架（翻译）

    原文链接:https://blog.gopheracademy.com/birthday-bash-2014/kite-microservice-library/ 此为中文翻译 用GO语言来编写web ...

  7. 绘图和可视化知识图谱-《利用Python进行数据分析》

    所有内容整理自<利用Python进行数据分析>,使用MindMaster Pro 7.3制作,emmx格式,源文件已经上传Github,需要的同学转左上角自行下载或者右击保存图片. 其他章 ...

  8. T133308 57级返校测试重测-T3-成绩单

    大致题意: 给定n个学生的学号和分数, 求各个分数段的人数, 求把学号排序后的序列, 求满分的人数以及学号. 基本思路: 虽然看起来很繁琐(?),但就非常非常的简单,直接按题意做就好了. 然后有个坑, ...

  9. [spring] -- AOP、IOC、DI篇

    AOP(面向切面编程) 怎么理解这个切面编程的概念及优点? 概念: 横切关注点与业务逻辑相分离,切面能帮助我们模块化横切关注点: 优点: 现在每个关注点都集中于一个地方,而不是分散到多处代码中: 服务 ...

  10. ISE第三方编辑器的使用

    刚开始使用ISE时候感觉ISE自带的编辑器并没有什么难用的,但是在看到了小梅哥的视频教学中那样行云流水般的操作让我心动不已,由此找到了相关的编辑器.为了以后看着方便直接摘取了前人的经验在我自己的博客中 ...