-
QT调用百度地图并返回点击地的经纬度
最近需要使用百度地图，并返回某个点的经纬度值。网上基本都是根据经纬度定位，而没有获取经纬度的。自己用QT简单实现了下。
1、编译环境搭建
这块耗时最久。因为之前QT默认的MinGW 64bit无法编译，需要安装MSVC2017(注意：安装Visual Studio 2017，最开始安装2022也不行)。安装过程，自行百度。
2、添加QWebEngineView组件
Qt5.5之后使用新的QWebEngineView代替了之前的QWebView，加载数据的方式也由同步变成了异步。所以访问网站页面和加载HTML页面都需要使用QWebEngineView类。而在QT提供的控件中是找不到QWebEngineView组件的。
先选个Graphics view控件，命名为mappage，然后右键，找到“提升为”，在对话框中的“提升的类名称”，输入QWebEngineView，点击添加即可。在添加两个按钮进行定位及获取经纬度，两个lineEdit显示经纬度。简单UI如下
3、添加QWebEngineView类
4、直接上代码
mainwindow.h如下
#ifndef MAINWINDOW_H #define MAINWINDOW_H #include#include #include #include #include #include QT_BEGIN_NAMESPACE namespace Ui { class MainWindow; } QT_END_NAMESPACE class MainWindow : public QMainWindow { Q_OBJECT public: MainWindow(QWidget *parent = nullptr); ~MainWindow(); private slots: void on_pushButton_clicked(); void on_pushButton_2_clicked(); private: Ui::MainWindow *ui; }; #endif // MAINWINDOW_H - 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
mainwindow.cpp中，通过QWebChannel创建一个与网页交互的通道，通道ID 为 JSBaidumap。加载网页，并进行参数传递及获取。
代码如下：#include "mainwindow.h" #include "ui_mainwindow.h" MainWindow::MainWindow(QWidget *parent) : QMainWindow(parent) , ui(new Ui::MainWindow) { ui->setupUi(this); QString htmlPath = QCoreApplication::applicationDirPath() + "/html/"; QString htmlFile = htmlPath + "baidumap.html"; qDebug() << htmlFile; QFile file(htmlFile); if(!file.exists()) qDebug() << "html file is not exist"; /* 创建一个与网页交互的通道 */ QWebChannel *webChannel = new QWebChannel(ui->mappage->page()); ui->mappage->page()->setWebChannel(webChannel); /* 注册通道，ID 为 JSBaidumap，其将在JS文件这引用 */ webChannel->registerObject(QString("JSBaidumap"), ui->mappage); /* 加载网页，注意加载网页必须在通道注册之后，其有有一个注册完成的信号， 可根据需要调用 */ ui->mappage->page()->load(QUrl("file:///" + htmlFile)); } MainWindow::~MainWindow() { delete ui; } void MainWindow::on_pushButton_clicked() //加载定位点 { QString lon = ui->lineEdit->text(); QString lat = ui->lineEdit_2->text(); QString cmd=QString("setlocation(%1,%2)").arg(lon).arg(lat); //将经纬度传给网页端 qDebug() << cmd; ui->mappage->page()->runJavaScript(cmd); } void MainWindow::on_pushButton_2_clicked() //获取经纬度 { //QVariant station; QString cmd=QString("getlocation()"); qDebug() << cmd; ui->mappage->page()->runJavaScript(cmd, [this](const QVariant &station) //获取经纬度 { qDebug() << "qt call js= " << station; double lng = station.toMap().toStdMap().at("lng").toDouble(); //解析经纬度 double lat = station.toMap().toStdMap().at("lat").toDouble(); ui->lineEdit->setText(QString::number(lng,'g',6)); ui->lineEdit_2->setText(QString::number(lat,'g',6)); }); }- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
5、HTML文件
具体可参考百度地图开发者中心的示例：https://lbsyun.baidu.com/jsdemo.htm#aCreateMap
我的HTML里实现了，地图中，以城市名设置中心，单击事件、获取单击点的经纬度、按照给的经纬度定位功能，baidumap.html如下：DOCTYPE html> <html> <head> <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>BDMap Sampletitle> <style type="text/css"> html{height:100%} body{height:100%;margin:0px;padding:0px} #container{height:100%} style> <script type="text/javascript" src="https://api.map.baidu.com/api?v=1.0&type=webgl&ak=你的密钥">script> <script type="text/javascript" src="qwebchannel.js">script> head> <body> <div id="container">div> <script type="text/javascript"> var map = new BMapGL.Map("container"); // 创建地图实例 map.centerAndZoom('深圳市', 15); // 初始化地图，设置中心点坐标和地图级别 // map.setMapType(BMAP_EARTH_MAP); // 设置地图样式，地球模式 // 创建标点 //var point = new BMapGL.Point(113.952988, 22.539841); //var marker = new BMapGL.Marker(point); // 创建标注 //map.addOverlay(marker); // 将标注添加到地图中 map.addEventListener('click', function (e) { map.clearOverlays(); var cpoint=new BMapGL.Point(e.latlng.lng,e.latlng.lat); var cmarker = new BMapGL.Marker(cpoint); // 创建标注 map.addOverlay(cmarker); map.setCenter(cpoint); //alert('点击位置经纬度：' + e.latlng.lng + ',' + e.latlng.lat); }); /*****************************/ // qt交互注册 new QWebChannel(qt.webChannelTransport, function(channel){ window.JSBaidumap = channel.objects.JSBaidumap; // 注册 } ); function setlocation(lng,lat){ //根据给定经纬度加载定位点并创建标注 map.clearOverlays(); var newpoint=new BMapGL.Point(lng,lat); var newmarker = new BMapGL.Marker(newpoint); map.addOverlay(newmarker); map.setCenter(newpoint); //alert('设置位置经纬度：' + lng + ',' + lat); }; function getlocation(){ //获取经纬度 var gpoint=map.getCenter(); //alert('设置位置经纬度：' + gpoint.lng + ',' + gpoint.lat); return gpoint; }; map.enableScrollWheelZoom(true); // 设置滚轮缩放 /******************************/ script> body> html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
注意，代码中使用的是相对地址，baidumap.html放在编译文件夹下build-maptest-Desktop_Qt_5_14_2_MSVC2017_64bit-Release\release\html
同时，在你的QT安装路径Qt5.14.2\Examples\Qt-5.14.2\webchannel\shared下拷贝qwebchannel.js文件到build-maptest-Desktop_Qt_5_14_2_MSVC2017_64bit-Release\release\html\文件下，此文件是QT程序与JS文件通讯用的。6、运行效果
直接运行，加载百度地图，以深圳市为中心。
设置经纬度，加载定位点，并跳到此经纬度，地图以此点为中心。
鼠标在地图上任意点下，地图以此点为中心。点获取经纬度按钮，可以获取此位置经纬度。 -
相关阅读:
数据大航海时代，奇安信如何构筑数据安全的“天盾”？
购买密封件时应注意哪些要点？
就在刚刚这份java八股文成功让我进入字节，拿到了人生第一个18k
上采样方式（反卷积、插值、反池化）
驱动开发：内核遍历进程VAD结构体
数据库MySQL中Show指令祥解
WordPress建站教程：10步快速搭建个人网站
Python机器学习应用入门 - 不断补充中20220807
闭关之 Vulkan 应用开发指南笔记（四）：绘制、几何体&片段处理、同步和回读数据
ttkefu子账号提示已被关闭或过期是什么一样，该怎么处理呢？
- 原文地址：https://blog.csdn.net/jianxuezixuan/article/details/127688115
