---

前言

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

一、通信桥梁bridge

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

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

#ifndef BDMAP_H
#define BDMAP_H#include <QWidget>
#include<QtWebEngineWidgets/QWebEngineView>
#include<QWebChannel>
class bdmap : public QWidget
{Q_OBJECT
public:explicit bdmap(QWidget *parent = nullptr);QWebEngineView *map;QWebChannel *channel;private:protected:void resizeEvent(QResizeEvent *event);signals:};
#endif // BDMAP_H

bdmap.cpp

#include "bdmap.h"
#include<QString>
#include<QWebEngineView>
#include<bridge.h>
bdmap::bdmap(QWidget *parent) : QWidget(parent)
{map = new QWebEngineView(this);channel = new QWebChannel(this);bridge *mybridge = new bridge();//创建通道对象用于与JS交互channel->registerObject("bridge_name",(QObject*)mybridge);map->page()->setWebChannel(channel);//加载HTML文件map->page()->load(QString("file:///C:/Users/16198/Desktop/LearnToA/C++Learn/QTCode/day9/map/baidumap.html"));//地图显示map->show();
}
void bdmap::resizeEvent(QResizeEvent *event)
{map->resize(this->size());
}

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

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

1.QT调用js函数

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

定位按钮转到槽。

下一步设计js函数。

function LocatedCity(x){map.centerAndZoom(x, 12);alert(x);
};

槽函数：

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

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