前期准备

百度离线地图api获取

主要参考：
https://blog.csdn.net/geekxm/article/details/14227139

可直接下载下面的资源，把里面的瓦片地图替换成自己的地图瓦片即可直接用：
https://download.csdn.net/download/xx970829/20669042?spm=1001.2014.3001.5501

地图瓦片下载工具

网上有挺多资源，不想麻烦的可下载如下资源，破解版全能电子地图下载器3.0，免安装：https://download.csdn.net/download/xx970829/20669119

qt与js交互工具qwebchannel.js下载

qt与js交互需要qwebchannel工具，这个文件直接在qt安装目录可直接找到：

在这里插入图片描述

将其文件拷贝到js文件夹下：

在这里插入图片描述

pro设置

在pro中加：

QT       += webenginewidgets

这个模块需要在安装qt时手动勾选。

程序源码

baidu.html

百度地图开放平台示例中心：
https://lbsyun.baidu.com/jsdemo.htm#uWalkNavPanel

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>DEMO</title>
<script src="js/apiv1.3.min.js"></script>
<script src="js/qwebchannel.js"></script>   <!-- 与qt交互 -->

<!--script type="text/javascript" src="http://api.map.baidu.com/api?v=1.3"></script-->
<link rel="stylesheet" type="text/css" href="bmap.css"/>
</head>


<body>
<div style="width:500px;height:300px;border:1px solid gray" id="container"></div>
</body>

<!--div style="width:100%;height:100%;border:1px solid gray;position:absolute;" id="container"></div -->


</html>
<script type="text/javascript">
  var tileLayer = new BMap.TileLayer({
    isTransparentPng: true
  });
  tileLayer.getTilesUrl = function (tileCoord, zoom) {
    var x = tileCoord.x;
    var y = tileCoord.y;
    return 'maptile/' + zoom + '/' + x + '/' + y + '.png';
  }

  var map = new BMap.Map('container');
 

  var point = new BMap.Point(126.58516,45.712676)    //创建点坐标
// map.centerAndZoom(point, 15);
  var marker = new BMap.Marker(point);        // 创建标注
  map.addOverlay(marker);
 
  map.addTileLayer(tileLayer);
  map.addControl(new BMap.NavigationControl());
  map.centerAndZoom(new BMap.Point(126.58516,45.712676), 15);
 // ----- control -----
  map.enableScrollWheelZoom();  //启用滚轮放大缩小
  map.enableKeyboard();       //启用键盘操作，默认禁用。键盘的上、下、左、右键可连续移动地图。
  map.enableContinuousZoom();//启用连续缩放效果
 //map.addControl(new BMap.NavigationControl()); //地图平移缩放控件
  map.addControl(new BMap.ScaleControl()); //显示比例尺在右下角
  //map.addControl(new BMap.OverviewMapControl({anchor: BMAP_ANCHOR_TOP_RIGHT, isOpen: true})); //缩略图控件

 // map.addEventListener('click', function (e) {   //点击位置经纬度
 //   alert('点击位置经纬度：' + e.latlng.lng + ',' + e.latlng.lat);
 // });

 //---------------------------------------------------------------
  var copyCtrl = new BMap.CopyrightControl({
  anchor: BMAP_ANCHOR_BOTTOM_RIGHT
  })
  map.addControl(copyCtrl);

// qt交互注册
new QWebChannel(qt.webChannelTransport,
    function(channel){
        window.MainWindow = channel.objects.MainWindow; // 注册
    }
);
//=================== JS中的函数 ============================================================
// 创建小车图标
var myIcon = new BMap.Icon("images/plane.ico", new BMap.Size(52, 26));

function myMarker(lng,lat){
    allMarker=map.getOverlays(); //保存所有标注
    var newpoint=new BMap.Point(lng,lat);
    var newmarker = new BMap.Marker(newpoint,{
        icon: myIcon
});        // 创建标注
    map.addOverlay(newmarker);
}
//=================== QT中的函数 =============================================================
//将经纬度传回qt
var updateInfo_click = function(lng,lat)
{
    MainWindow.getCoordinate_click(lng,lat);  //getCoordinate_click为qt槽函数
}
var updateInfo_mousemove = function(lng,lat)
{
    MainWindow.getCoordinate_mousemove(lng,lat);  
}

//js监控经纬度
map.addEventListener("click",function(e) {	//点击	

    updateInfo_click(e.point.lng,e.point.lat);
    
});
map.addEventListener("mousemove",function(e) {	//鼠标移动	

    updateInfo_mousemove(e.point.lng,e.point.lat);
    
});

</script>

桥接类bridge

自己定义的一个类，便于qt与js间的交互

bridge.h

#ifndef BRIDGE_H
#define BRIDGE_H

#include<QObject>
class bridge : public QObject
{
   Q_OBJECT
public:
    bridge();
signals:
    void sendData_click(QString lon,QString lat);   //发送信号
    void sendData_mousemove(QString str);

public slots:
    void getCoordinate_click(QString lon,QString lat);
    void getCoordinate_mousemove(QString lon,QString lat);


};

#endif // BRIDGE_H

bridge.cpp

#include "bridge.h"
#include<QDebug>
bridge::bridge()
{


}
void bridge::getCoordinate_click(QString lon, QString lat)
{
   // QString str=QString("%1,%2").arg(lon).arg(lat);
   //qDebug()<<str;  //获取鼠标点击位置的地图坐标
    emit sendData_click(lon,lat); //发送信号
}
void bridge::getCoordinate_mousemove(QString lon, QString lat)
{
   QString str=QString("%1,%2").arg(lon).arg(lat);
   //qDebug()<<str;  //获取鼠标点击位置的地图坐标
    emit sendData_mousemove(str);//发送信号
}

主程序

代码中解释比较详细

main.cpp

#include "mainwindow.h"

#include <QApplication>

int main(int argc, char *argv[])
{
    QApplication a(argc, argv);
    MainWindow w;
    w.show();

    return a.exec();
}

mainwindow.h

#ifndef MAINWINDOW_H
#define MAINWINDOW_H

#include <QMainWindow>
#include "bridge.h"
#include<QWebEngineView>
#include<QWebChannel>
QT_BEGIN_NAMESPACE
namespace Ui { class MainWindow; }
QT_END_NAMESPACE

class MainWindow : public QMainWindow
{
    Q_OBJECT

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

private slots:
    void on_pushButton_clicked();
    void receiveData_click(QString lon,QString lat);   //接收信号
    void receiveData_mousemove(QString str);

private:
    Ui::MainWindow *ui;
    QWebEngineView *mainMapView;
    bridge *mybride;
   // QWebView* m_pWebView;    // QWebView对象
};
#endif // MAINWINDOW_H

mainwindow.cpp

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

   // ui->widget_2->setParent(this);
    mainMapView = new QWebEngineView(ui->widget_2);//ui->widget_2
    //mainMapView->load(QUrl("file:///home/xx/qt/qt_baidu/baidu.html"));//baidumap.html
    //mainMapView->resize(1,1);
    //mainMapView->show();
    bridge *mybride=new bridge();        //创建通道对象用于与JS交互
    QWebChannel *channel=new QWebChannel(ui->widget_2);
    channel->registerObject(QString("MainWindow"),(QObject*)mybride); //  QWebChannel对Widget类，注册一个MainWindow的通信介质

    mainMapView->page()->setWebChannel(channel);
    mainMapView->page()->load(QUrl("file:///home/xx/qt/qt_baidu/baidu.html"));

    //关联信号和槽函数
    connect(mybride,&bridge::sendData_click, this, &MainWindow::receiveData_click);
    connect(mybride,&bridge::sendData_mousemove, this, &MainWindow::receiveData_mousemove);

}

MainWindow::~MainWindow()
{
    delete ui;
}
void MainWindow::resizeEvent(QResizeEvent *)
{
    mainMapView->resize(this->size());
}

void MainWindow::on_pushButton_clicked()
{
    //QString cmd="generate_track()";
    QString cmd=QString("myMarker(%1,%2)").arg(ui->lineEdit->text()).arg(ui->lineEdit_2->text());
    mainMapView->page()->runJavaScript(cmd);
}

void MainWindow::receiveData_click(QString lon,QString lat)
{
     ui->lineEdit->setText(lon);
     ui->lineEdit_2->setText(lat);
}
void MainWindow::receiveData_mousemove(QString str)
{
    //qDebug()<<str;
     ui->label->setText(str);
  }