最近需要使用百度地圖，并返回某個(gè)點(diǎn)的經(jīng)緯度值。網(wǎng)上基本都是根據(jù)經(jīng)緯度定位，而沒有獲取經(jīng)緯度的。自己用QT簡單實(shí)現(xiàn)了下。
1、編譯環(huán)境搭建
這塊耗時(shí)最久。因?yàn)橹癚T默認(rèn)的MinGW 64bit無法編譯，需要安裝MSVC2017(注意：安裝Visual Studio 2017，最開始安裝2022也不行)。安裝過程，自行百度。
2、添加QWebEngineView組件
Qt5.5之后使用新的QWebEngineView代替了之前的QWebView，加載數(shù)據(jù)的方式也由同步變成了異步。所以訪問網(wǎng)站頁面和加載HTML頁面都需要使用QWebEngineView類。而在QT提供的控件中是找不到QWebEngineView組件的。
先選個(gè)Graphics view控件，命名為mappage，然后右鍵，找到“提升為”，在對(duì)話框中的“提升的類名稱”，輸入QWebEngineView，點(diǎn)擊添加即可。
在添加兩個(gè)按鈕進(jìn)行定位及獲取經(jīng)緯度，兩個(gè)lineEdit顯示經(jīng)緯度。簡單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創(chuàng)建一個(gè)與網(wǎng)頁交互的通道，通道ID 為 JSBaidumap。加載網(wǎng)頁，并進(jìn)行參數(shù)傳遞及獲取。
代碼如下：
#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";
/* 創(chuàng)建一個(gè)與網(wǎng)頁交互的通道 */
QWebChannel *webChannel = new QWebChannel(ui->mappage->page());
ui->mappage->page()->setWebChannel(webChannel);
/* 注冊通道，ID 為 JSBaidumap，其將在JS文件這引用 */
webChannel->registerObject(QString("JSBaidumap"), ui->mappage);
/* 加載網(wǎng)頁，注意加載網(wǎng)頁必須在通道注冊之后，其有有一個(gè)注冊完成的信號(hào)，
可根據(jù)需要調(diào)用 */
ui->mappage->page()->load(QUrl("file:///" + htmlFile));
}
MainWindow::~MainWindow()
{
delete ui;
}
void MainWindow::on_pushButton_clicked() //加載定位點(diǎn)
{
QString lon = ui->lineEdit->text();
QString lat = ui->lineEdit_2->text();
QString cmd=QString("setlocation(%1,%2)").arg(lon).arg(lat); //將經(jīng)緯度傳給網(wǎng)頁端
qDebug() << cmd;
ui->mappage->page()->runJavaScript(cmd);
}
void MainWindow::on_pushButton_2_clicked() //獲取經(jīng)緯度
{
//QVariant station;
QString cmd=QString("getlocation()");
qDebug() << cmd;
ui->mappage->page()->runJavaScript(cmd, [this](const QVariant &station) //獲取經(jīng)緯度
{
qDebug() << "qt call js= " << station;
double lng = station.toMap().toStdMap().at("lng").toDouble(); //解析經(jīng)緯度
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文件
具體可參考百度地圖開發(fā)者中心的示例：https://lbsyun.baidu.com/jsdemo.htm#aCreateMap
我的HTML里實(shí)現(xiàn)了，地圖中，以城市名設(shè)置中心，單擊事件、獲取單擊點(diǎn)的經(jīng)緯度、按照給的經(jīng)緯度定位功能，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"); // 創(chuàng)建地圖實(shí)例
map.centerAndZoom('深圳市', 15); // 初始化地圖，設(shè)置中心點(diǎn)坐標(biāo)和地圖級(jí)別
// map.setMapType(BMAP_EARTH_MAP); // 設(shè)置地圖樣式，地球模式
// 創(chuàng)建標(biāo)點(diǎn)
//var point = new BMapGL.Point(113.952988, 22.539841);
//var marker = new BMapGL.Marker(point); // 創(chuàng)建標(biāo)注
//map.addOverlay(marker); // 將標(biāo)注添加到地圖中
map.addEventListener('click', function (e) {
map.clearOverlays();
var cpoint=new BMapGL.Point(e.latlng.lng,e.latlng.lat);
var cmarker = new BMapGL.Marker(cpoint); // 創(chuàng)建標(biāo)注
map.addOverlay(cmarker);
map.setCenter(cpoint);
//alert('點(diǎn)擊位置經(jīng)緯度：' + e.latlng.lng + ',' + e.latlng.lat);
});
/*****************************/
// qt交互注冊
new QWebChannel(qt.webChannelTransport,
function(channel){
window.JSBaidumap = channel.objects.JSBaidumap; // 注冊
}
);
function setlocation(lng,lat){ //根據(jù)給定經(jīng)緯度加載定位點(diǎn)并創(chuàng)建標(biāo)注
map.clearOverlays();
var newpoint=new BMapGL.Point(lng,lat);
var newmarker = new BMapGL.Marker(newpoint);
map.addOverlay(newmarker);
map.setCenter(newpoint);
//alert('設(shè)置位置經(jīng)緯度：' + lng + ',' + lat);
};
function getlocation(){ //獲取經(jīng)緯度
var gpoint=map.getCenter();
//alert('設(shè)置位置經(jīng)緯度：' + gpoint.lng + ',' + gpoint.lat);
return gpoint;
};
map.enableScrollWheelZoom(true); // 設(shè)置滾輪縮放
/******************************/
</script>
</body>
</html>
注意，代碼中使用的是相對(duì)地址，baidumap.html放在編譯文件夾下build-maptest-Desktop_Qt_5_14_2_MSVC2017_64bit-Release\release\html
同時(shí)，在你的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文件通訊用的。文章來源：http://www.zghlxwxcb.cn/news/detail-465178.html
6、運(yùn)行效果
直接運(yùn)行，加載百度地圖，以深圳市為中心。
設(shè)置經(jīng)緯度，加載定位點(diǎn)，并跳到此經(jīng)緯度，地圖以此點(diǎn)為中心。
鼠標(biāo)在地圖上任意點(diǎn)下，地圖以此點(diǎn)為中心。點(diǎn)獲取經(jīng)緯度按鈕，可以獲取此位置經(jīng)緯度。文章來源地址http://www.zghlxwxcb.cn/news/detail-465178.html
到了這里，關(guān)于QT調(diào)用百度地圖并返回點(diǎn)擊地的經(jīng)緯度的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
