GPS坐标显示在百度地图上(Qt+百度地图)

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

上个效果图:

下面是带有轨迹的回放:

目录
相关文章
|
6月前
|
JavaScript 定位技术 PHP
【百度地图】——利用三级联动加载百度地图
【百度地图】——利用三级联动加载百度地图
|
29天前
|
JavaScript 搜索推荐 定位技术
【百度地图2.5D、3D在Vue项目中的使用】嵌入二维百度地图、三维百度地图、多种显示模式风格样式颜色的百度地图
【百度地图2.5D、3D在Vue项目中的使用】嵌入二维百度地图、三维百度地图、多种显示模式风格样式颜色的百度地图
|
11月前
|
移动开发 小程序 JavaScript
微信小程序学习实录6(百度经纬度采集、手动调整精度、H5嵌入小程序、百度地图jsAPI、实时定位、H5更新自动刷新)
微信小程序学习实录6(百度经纬度采集、手动调整精度、H5嵌入小程序、百度地图jsAPI、实时定位、H5更新自动刷新)
163 1
|
11月前
|
数据可视化 前端开发 搜索推荐
数据可视化大屏百度地图GPS轨迹位置感知状态开发实战案例解析(百度地图jsAPI,包含缩放控件、点线覆盖物、弹窗、标注图标分类功能)
数据可视化大屏百度地图GPS轨迹位置感知状态开发实战案例解析(百度地图jsAPI,包含缩放控件、点线覆盖物、弹窗、标注图标分类功能)
203 0
|
11月前
|
移动开发 JavaScript 定位技术
百度地图开发:地图调起API(Web端)使用终点经纬度直接调用百度地图导航信息的解决方案
百度地图开发:地图调起API(Web端)使用终点经纬度直接调用百度地图导航信息的解决方案
247 0
|
11月前
|
小程序 JavaScript 前端开发
微信小程序学习实录3(环境部署、百度地图微信小程序、单击更换图标、弹窗信息、导航、支持腾讯百度高德地图调起)
微信小程序学习实录3(环境部署、百度地图微信小程序、单击更换图标、弹窗信息、导航、支持腾讯百度高德地图调起)
495 0
|
11月前
|
移动开发 定位技术 API
百度地图开发:H5获取GPS-wg84经纬度与百度定位API的偏差测试
百度地图开发:H5获取GPS-wg84经纬度与百度定位API的偏差测试
160 0
|
11月前
|
JavaScript 前端开发 定位技术
百度地图开发:php坐标转换服务将常用的非百度坐标转换成百度地图中使用的坐标
百度地图开发:php坐标转换服务将常用的非百度坐标转换成百度地图中使用的坐标
55 0
|
11月前
|
JavaScript 前端开发 BI
百度地图POI多信息点标注开发说明文档(php+layui+mysql+百度javascript API2.0+echarts4.8)
百度地图POI多信息点标注开发说明文档(php+layui+mysql+百度javascript API2.0+echarts4.8)
111 0
|
定位技术 API Android开发
Android Studio进行APP设计调用百度地图API接口隐藏百度地图的logo方法
Android Studio进行APP设计调用百度地图API接口隐藏百度地图的logo方法
330 0
Android Studio进行APP设计调用百度地图API接口隐藏百度地图的logo方法