QT5百度地图开发学习——GraphicsView控件提升为QWebEngineView地图显示

前言

在上一个地图展示的博客中，你会发现整个界面都是地图，但是我们在通信的时候会有界面控件存在，以此来进行与地图的交互。如图所示（图源网络）。

所以上一篇文章中的界面肯定不是我们想要的，由于QT里面没有QWebEngineView的可视化界面控件，因此为了实现这一目标，我暂时想到两种方法：（1）可以写两个界面进行控制；（2）也可以进行控件的提升让它作为可视化控件。其实在我看来这两个是异曲同工的，所以本文用GraphicsView实现对控件的提升。

一、选择控件

用GraphicsView这个，谢谢，我尝试过通过widge的显示图片地图，但是最后不能交互。（内容放在后面了，如果有大佬看到，请指点一二）。
提升为QWebEngineView即可，布局设置如图。

然后上代码。
mainwindow.h

#ifndef MAINWINDOW_H
#define MAINWINDOW_H

#include <QMainWindow>
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_site_clicked();

private:
    Ui::MainWindow *ui;
};
#endif // MAINWINDOW_H

mainwindow.cpp

#include "mainwindow.h"
#include "ui_mainwindow.h"
#include<QDir>
#include<bridge.h>
#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);

    //加载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;
}

}

显示结果：

二、错误显示示范（后期不能js交互）

首先加载一个C++类（不需要界面）。选择QWidget作为基类。

然后代码设计如下，其实就是加载地图的代码。
bdmap.h

#ifndef BDMAP_H
#define BDMAP_H

#include <QWidget>
#include<QtWebEngineWidgets/QWebEngineView>
class bdmap : public QWidget
{
    Q_OBJECT
public:
    explicit bdmap(QWidget *parent = nullptr);

private:
    QWebEngineView *map;

protected:
    void resizeEvent(QResizeEvent *event);

signals:

};

#endif // BDMAP_H

bdmap.cpp

#include "bdmap.h"
#include<QString>
#include<QWebEngineView>
bdmap::bdmap(QWidget *parent) : QWidget(parent)
{
    map = new QWebEngineView(this);
    //加载HTML文件
    map->page()->load(QString("file:///C:/Users/16198/Desktop/LearnToA/C++Learn/QTCode/day9/add_map/baidumap.html"));
    //地图显示
    map->show();
}
void bdmap::resizeEvent(QResizeEvent *event)
{
    map->resize(this->size());
}

提升的控件用容器控件containers中的Widget这里你可以用两个widget，其中一个放地图显示，一个放按钮等控件。
提升流程：
点击右键提升为，然后设置如下：点击全局包含（这个是方便复用，这里这个可加可不加），然后添加——>提升即可。

设计一下布局，这个widget在布局的时候会直接缩小的没了，在这里你要设计这个的最小的size。这样就能进行好好地布局了。


界面代码的实现
mainwindow.h

#ifndef MAINWINDOW_H
#define MAINWINDOW_H

#include <QMainWindow>
#include<QtWebEngineWidgets/QWebEngineView>
QT_BEGIN_NAMESPACE
namespace Ui { class MainWindow; }
QT_END_NAMESPACE

class MainWindow : public QMainWindow
{
    Q_OBJECT

public:
    MainWindow(QWidget *parent = nullptr);
    ~MainWindow();


private:
    Ui::MainWindow *ui;

};
#endif // MAINWINDOW_H

mainwindow.cpp

#include "mainwindow.h"
#include "ui_mainwindow.h"
#include<QDir>
MainWindow::MainWindow(QWidget *parent)
    : QMainWindow(parent)
    , ui(new Ui::MainWindow)
{
    ui->setupUi(this);
}

MainWindow::~MainWindow()
{
    delete ui;
}

其实这两个没有改代码，是最开始生成项目时候的文件。
最后运行结果如图：