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

2024-04-02 14

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： 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);
}