一、前言

2022年圣诞节到来啦，很高兴这次我们又能一起度过~
遇上圣诞节，正好最近研究了QT中加载百度离线地图，用百度地图API加载个圣诞树（主要我想要那个圣诞节特制勋章）。

二、创意名

在百度离线地图加载个圣诞树。

三、效果展示

本来应该做成gif格式，奈何电脑的制作工具找不到了，那个圣诞树会动的，在合肥的位置不灵不灵的。

四、实现步骤（很重要）

4.1 前提

1、QT中能使用QWebEngine必须要在VS2017以及以上使用，才支持，这点很重要；
2、百度离线地图地图下载我用的是 地址
里面有很多百度给的官方API用例
3、如果使用其他下载地图切片，我使用的是全能地图下载器，切记下载百度地图，因为你用的是百度的API，如果使用谷歌的那就下载对应的，不然地图加载不了

4.2 步骤

1、创建一个widget，然后提升为QWebEngineView;
2、在百度官方例子中使用一个满足自己功能，如果想日后自己使用，最好精简一个版本
3、QT与html前端的交互，功能可以用js写在html中，也可以写在其他中，通过Webchannel传递；

五、编码实现

主要代码展示
QT中初始化时候代码

    ui->setupUi(this);
    view = ui->widget;
    QDir temDir("../TestMap3/Baidu_JS/sample.html");
    QString absDir = temDir.absolutePath();

    QWebChannel *channel = new QWebChannel(this);

   //brige 是一个类，在qt中定义，然后在html文本中注册就可以使用   其中的功能函数
    channel->registerObject("bridge"   
    (QObject*)bridge::instance());
   view->page()->setWebChannel(channel);
   view->page()->load(QUrl(QString("file:///%0").arg(absDir)));
   connect(ui->pushButton, &QPushButton::clicked, [this]() {
       view->page()->runJavaScript("showSant()");

前端html主要代码

function showSant() {
      		var pt = new BMap.Point(117.209338, 31.85);
			var myIcon = new BMap.Icon("./sant.gif", new BMap.Size(32,32));
			var marker2 = new BMap.Marker(pt,{icon:myIcon});  // 创建标注
			map.addOverlay(marker2);              // 将标注添加到地图中
      }


//注册使用 bridge类
      new QWebChannel(qt.webChannelTransport, function(channel) {
        window.bridge = channel.objects.bridge;
        window.bridge.sigYourName.connect(function(name) {
          alert(name);
        });
      });

      function onShowMsgBox() {
        bridge.showMsgBox()
      }

      function onGetYourName() {
        bridge.getYourName();
      }