GPS坐标显示在百度地图上（Qt+百度地图）

Qt在5.6以后的版本就不支持通过mingw编译器来调用webview控件了，这里我用的是Qt5.4的版本，用mingw编译器调试的。

下面简单介绍下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 - 1strokeColor:"#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上了，供大家参考:qt调用百度地图与js通信源码_qt在线地图交互-C++文档类资源-CSDN下载

上个效果图：

下面是带有轨迹的回放：

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

GPS坐标显示在百度地图上（Qt+百度地图）相关推荐

php 地图距离,PHP计算百度地图两个GPS坐标之间距离的方法
这篇文章主要介绍了PHP计算百度地图两个GPS坐标之间距离的方法,是针对百度地图接口开发的典型应用,需要的朋友可以参考下本文实例讲述了PHP计算百度地图两个GPS坐标之间距离的方法.分享给大家供大家 ...
笔记：百度地图通过输入地名搜索位置显示在地图上
场景:刚刚接到需求---通过输入地名搜索位置显示在地图上,然后百度了一番,发现很多都是BMap版本的地图而最新我用的是BMapGL地图所以多多少少有一些不一样,查略相关文档得出解决方案
安卓百度地图之定位图标在地图上显示
此文章接上一篇文件:安卓百度地图之定位_zpon_wangxuan的博客-CSDN博客,对于地图上显示定位图标就是在地图上添加一个地图的marker就可以了: 布局文件代码: <LinearLa ...
关于GPS坐标转百度坐标与goolg坐标转百度坐标java代码实现方法
关于GPS坐标转百度坐标与goolg坐标转百度坐标java代码实现方法百度显示坐标经过了两次加密所以需要转换. <pre name="code" class="j ...
百度地图上的标注物太多导致界面卡顿的解决办法
百度地图的API虽然说覆盖物多了可以用聚合,但聚合使用下来,性能并不好目前解决方案是,获取地图的左下角和右上角的经纬度,然后根据此经纬度范围,到数据库中搜索,把该区域内的覆盖物取出标注到地图上. 生 ...
GPS坐标偏移与转换
一.坐标类型: 国家规定,中国大陆所有公开地理数据都需要至少用GCJ-02进行加密 WGS84坐标,GPS设备获取的角度坐标,中国地图产品都不允许使用GPS坐标谷歌地球,googleearth上取到 ...
实现高德坐标转GPS坐标
vue 实现高德坐标转GPS坐标首先介绍一下常见的几种地图的坐标类型: WGS-84:这是一个国际标准,也就是GPS坐标(Google Earth.或者GPS模块采集的都是这个类型). GCJ-02 ...
百度地图3.0离线地图教程和echarts的结合使用
百度地图版本2.0和3.0区别对比 http://lbsyun.baidu.com/index.php?title=jspopular3.0/guide/usage 1.找到百度地图的主文件 1.1 ...
java echarts 散点图,echarts在地图上绘制散点图（任意点）
项目需求:在省份地图上绘制散点图,散点位置不一定是哪个城市或哪个区县,即任意点通过查询官网文档,找到一个与需求类似的Demo:https://www.echartsjs.com/gallery/ed ...

GPS坐标显示在百度地图上（Qt+百度地图）

GPS坐标显示在百度地图上（Qt+百度地图）相关推荐

最新文章

热门文章