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. Let's GO(一）

    近来开始学Go,留此博客以记录学习过程,顺便鞭策自己更加努力. 人生苦短,Let's GO! Let's GO(一) Let's GO(二) Let's GO(三) Let's GO(四) 简单介绍 ...

  2. 查看sudo的history:配置sudolog

    sudo 权力很大,但责任更重大! We trust you have received the usual lecture from the local System Administrator. ...

  3. Quartz.Net系列（十一）：System.Timers.Timer+WindowsService实现定时任务

    1.创建WindowsService项目 2.配置项目 3.AddInstaller(添加安装程序) 4.修改ServiceName(服务名称).StartType(启动类型).Description ...

  4. 三、python函数详解

    函数的定义: 函数是组织好的,可重复使用的,用来实现单一,或相关联功能的代码段. 定义规则: 函数代码块以 def 关键词开头,后接函数标识符名称和圆括号(). 任何传入参数和自变量必须放在圆括号中间 ...

  5. 数据可视化之DAX篇（二十五）PowerBI常用的度量值：累计至今

    https://zhuanlan.zhihu.com/p/64999937 经常碰到本年至今.本月至今的数据计算,其实还有一类计算是,从历史最早日期至今的累计计算,比如从开业到现在总共卖出了多少件商品 ...

  6. keras 文本序列的相关api

    1.word_tokenizer = Tokenizer(MAX_WORD_NUMS)    MAX_WORD_NUMS设置词典的最大值,为一个int型数值 2.word_tokenizer.fit_ ...

  7. Elasticsearch恢复备份的数据

    1.恢复备份好的snapshot 1.1恢复snapshot_1下的所有index POST _snapshot/my_backup/snapshot_1/_restore 1.2恢复snapshot ...

  8. Ethical Hacking - GAINING ACCESS(7)

    Server Side Attacks - NEXPOSE NeXpose is a vulnerability management framework, it allows us to disco ...

  9. tensorflow对鸢尾花进行分类——人工智能入门篇

    tensorflow之对鸢尾花进行分类 任务目标 对鸢尾花数据集分析 建立鸢尾花的模型 利用模型预测鸢尾花的类别 环境搭建 pycharm编辑器搭建python3.* 第三方库 tensorflow1 ...

  10. 关于ES6的let和const

    变量 var存在的问题 可以重复声明 无法限制修改 没有块级作用域 (在全局范围内有效) 存在变量提升 const/let 不可以重复声明 let a = 1; let a = 2; var b = ...