最近需要使用百度地图，并返回某个点的经纬度值。网上基本都是根据经纬度定位，而没有获取经纬度的。自己用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 <QMainWindow>
#include <QWebEngineHistory>
#include <QWebEngineHistoryItem>
#include <QWebEnginePage>
#include <QWebEngineView>
#include <QtWebEngineWidgets/QtWebEngineWidgets>
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
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));
});
}
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 Sample</title>
<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> <!-- 与qt交互 -->
</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>
注意，代码中使用的是相对地址，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文件通讯用的。文章来源：https://www.toymoban.com/news/detail-465178.html
6、运行效果
直接运行，加载百度地图，以深圳市为中心。
设置经纬度，加载定位点，并跳到此经纬度，地图以此点为中心。
鼠标在地图上任意点下，地图以此点为中心。点获取经纬度按钮，可以获取此位置经纬度。文章来源地址https://www.toymoban.com/news/detail-465178.html
到了这里，关于QT调用百度地图并返回点击地的经纬度的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
