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如下
QT调用百度地图并返回点击地的经纬度_第1张图片

3、添加QWebEngineView类

QT调用百度地图并返回点击地的经纬度_第2张图片

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

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 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>

注意,代码中使用的是相对地址,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、运行效果

QT调用百度地图并返回点击地的经纬度_第3张图片
直接运行,加载百度地图,以深圳市为中心。
QT调用百度地图并返回点击地的经纬度_第4张图片
设置经纬度,加载定位点,并跳到此经纬度,地图以此点为中心。
QT调用百度地图并返回点击地的经纬度_第5张图片
鼠标在地图上任意点下,地图以此点为中心。点获取经纬度按钮,可以获取此位置经纬度。

你可能感兴趣的:(QT,qt,ui,javascript,百度)