前言

在上文《QT5百度地图开发学习——控件提升展示地图》中，我们通过控件提升的方式在同一界面展示了地图又可以显示按钮，本节就来展示如何使用这一按钮与百度地图通信交互。

一、通信桥梁bridge

设计bridge作为qt与百度地图的通信桥梁。
新建一个名字为bridge的C++文件。继承QObject,不需要改变其它的，这个文件的作用是用于js中调用qt函数，传递数据给qt。

这个时候还没有连接bridge，通过mainwindow.cpp代码连接bridge。
bdmap.h

#ifndef MAINWINDOW_H
#define MAINWINDOW_H#include <QMainWindow>
#include<QWebChannel>
QT_BEGIN_NAMESPACE
namespace Ui { class MainWindow; }
QT_END_NAMESPACEclass MainWindow : public QMainWindow
{Q_OBJECTpublic:MainWindow(QWidget *parent = nullptr);~MainWindow();private slots:void on_pushButton_site_clicked();private:Ui::MainWindow *ui;QWebChannel *channel;
};
#endif // MAINWINDOW_H

mainwindow.cpp

#include "mainwindow.h"
#include "ui_mainwindow.h"
#include<QDir>
#include<bridge.h>
#include<QWebChannel>
#include<QString>
#include<QDebug>
#include<QtWebEngineWidgets/QWebEnginePage>#pragma execution_character_set("utf-8")MainWindow::MainWindow(QWidget *parent): QMainWindow(parent), ui(new Ui::MainWindow)
{ui->setupUi(this);channel = new QWebChannel(this);bridge *mybridge = new bridge();//创建通道对象用于与JS交互channel->registerObject("bridge_name",(QObject*)mybridge);ui->map->page()->setWebChannel(channel);//加载HTML文件QDir temDir("C:/Users/16198/Desktop/LearnToA/C++Learn/QTCode/day9/map/baidumap.html");QString absDir = temDir.absolutePath();QString filePath = "file:///" + absDir;//显示地图ui->map->page()->load(QUrl(filePath));//地图显示//ui->map->show();}MainWindow::~MainWindow()
{delete ui;
}void MainWindow::on_pushButton_site_clicked()
{ui->map->page()->runJavaScript(QString("LocatedCity(\"%1\")").arg(QString(ui->lineEdit_city->text())));}

这样就注册好了,可以进行通信了。

二、QT与JS相互通信（调用函数）

1.QT调用js函数

功能设计：用户点击“定位”按钮，定位到输入地址的位置，如果地址错误，定位到北京市。
界面设计如图所示：

定位按钮转到槽。

下一步设计js函数。该函数的位置在baidumap.html中的。这个位置是写JavaScript代码的地方。

function LocatedCity(x){map.centerAndZoom(x, 12);//地图定位到x位置
};

槽函数：

void MainWindow::on_pushButton_site_clicked()
{bd.map->page()->runJavaScript(QString("LocatedCity(\"%1\")").arg(QString(ui->lineEdit_city->text())));
}

最后效果：
输入武汉市，点击定位：
得到武汉市位置地图

QT5百度地图开发学习——qt调用JavaScript函数并传参相关推荐

QT5百度地图开发学习——qt调用输入位置坐标位置进行百度地图定位
系列文章目录上一章: QT5百度地图开发学习--JavaScript调用qt函数并传参给qt 文章目录系列文章目录前言一.界面设计二.槽函数总结前言本文实现输入坐标然后在地图上显示位置 ...
QT5百度地图开发学习——地图显示
文章目录前言一.工程创建二.地图显示 1.pro文件更改 2.载入地图显示 3.特别注意总结前言当qt5+MSVC环境搭建成功和将baidumap.html,qwebchannel.js准 ...
点击事件调用匿名函数如何传参_事件发布/订阅模式的简单实现
这是一种广泛应用于异步编程的模式,是回调函数的事件化,常常用来解耦业务逻辑.事件的发布者无需关注订阅的侦听器如何实现业务逻辑,甚至不用关注有多少个侦听器存在.数据通过消息的方式可以灵活的传递. --& ...
Qt开发北斗定位系统融合百度地图API及Qt程序打包发布
Qt开发北斗定位系统融合百度地图API及Qt程序打包发布 1.上位机介绍最近有个接了一个小型项目,内容很简单,就是解析北斗GPS的串口数据然后输出经纬度,但接过来觉得太简单,就发挥了主观能动性,增加 ...
使用QT嵌入百度地图开发高B格岸基监控软件
文章目录 1.简述 2.百度地图 2.1百度地图准备 2.2 百度地图开发 2.2.1实时绘制轨迹 2.2.2设定航点 3 QT软件开发 3.1使用QWebEngineView显示Html 3.2 M ...
Android学习 - 百度地图开发基础
什么是百度地图API? 百度地图移动版API(Android)是一套基于Android 1.5及以上设备的应用程序接口,通过该接口,您可以轻松访问百度服务和数据,构建功能丰富.交互性强的地图应用程序. ...
GPS坐标显示在百度地图上（Qt+百度地图）
Qt在5.6以后的版本就不支持通过mingw编译器来调用webview控件了,这里我用的是Qt5.4的版本,用mingw编译器调试的. 下面简单介绍下Qt与html中的javascript调用交互过程 ...
[android] 百度地图开发 (二).定位城市位置和城市POI搜索
一. 百度地图城市定位和POI搜索知识上一篇文章"百度地图开发(一)"中讲述了如何申请百度APIKey及解决显示空白网格的问题.该篇文章主要讲述如何定位城市位置.定位 ...
通过腾讯地图、高德地图、百度地图开发接口获取坐标对应的周边相关信息
通过腾讯地图.高德地图.百度地图开发接口获取坐标对应的周边相关信息更新: 以前出于好意暴露了个人的KEY,现已被烂用.为不影响您的业务,请使用我的KEY的朋友去申请自己的KEY,我的KEY将在不久后 ...

QT5百度地图开发学习——qt调用JavaScript函数并传参

文章目录

前言

一、通信桥梁bridge

二、QT与JS相互通信（调用函数）

1.QT调用js函数

QT5百度地图开发学习——qt调用JavaScript函数并传参相关推荐

最新文章

热门文章