百度地图API入门7-QT与JS通讯

QT  += webenginewidgets webchannel

//地图布局
    m_webView = new QWebEngineView(this);
    QStackedLayout* layout = new QStackedLayout(ui->frame);
    ui->frame->setLayout(layout);
    layout->addWidget(m_webView);
    QFileInfo file("./Resource/map.html");
    QString filePath = file.absoluteFilePath();
    m_webView->load(filePath);
    //web call js -----------------------
    m_webChannel = new QWebChannel;
    m_jsContext  = new JsContext();
    m_webChannel->registerObject("context", m_jsContext);
    m_webView->page()->setWebChannel(m_webChannel);    
    connect(m_jsContext, &JsContext::recvdMsg, this, &MainWindow::recvdMsg);

3. JsContext.h

#ifndef JSCONTEXT_H
#define JSCONTEXT_H
#include <QObject>
#include <QWebEnginePage>

class JsContext : public QObject
{
    Q_OBJECT
public:
    explicit JsContext(QObject *parent = nullptr);

signals:
    void recvdMsg(const QString& msg);

public:
    //向页面发送消息
    void sendMsg(QWebEnginePage* page, const QString& msg);
public slots:
    //接收到页面发送来的消息(提供给js直接调用)
    void onMsg(const QString& msg);
};
#endif // JSCONTEXT_H

4. JsContext.cpp

#include "JsContext.h"

JsContext::JsContext(QObject *parent) : QObject(parent)
{
}

void JsContext::onMsg(const QString &msg)
{
    emit recvdMsg(msg);
}

void JsContext::sendMsg(QWebEnginePage* page, const QString& msg)
{
    page->runJavaScript(QString("recvMessage('%1');").arg(msg));
}

6. QT 调用JS的方法

void MainWindow::CallJs(const QVector<double> &param)
{
    QJsonArray num_json;           //声明QJsonArray
    QJsonDocument num_document;    //将QJsonArray改为QJsonDocument类
    QByteArray num_byteArray;
    for(int i=0;i<param.size();i++){//将数组传入压入num_json
        num_json.append(param.at(i));
    }
    num_document.setArray(num_json);
    num_byteArray = num_document.toJson(QJsonDocument::Compact);
    //QString::asprintf("[%d,%f,%f]",)
    QString numJson(num_byteArray);   //再转为QString
    qDebug()<<"numJson:"<<numJson;//numJson: "[3,14.07,30.782]"
//    std::cout<<arr[0]<<arr[1]<<" t:"<<numJson.toStdString()<<std::endl;
//    QString cmd = QString("showarray(\"%1\")").arg(numJson);
//    m_webView->page()->runJavaScript(cmd);
    m_jsContext->sendMsg(m_webView->page(),numJson);
}

7. js 收到后返回

var context;
// 初始化
function init()
{
    if (typeof qt != 'undefined')
    {
        new QWebChannel(qt.webChannelTransport, function(channel)
        {
			context = channel.objects.context;//name:context
        }
        );
    }
    else
    {
        alert("qt对象获取失败！");
    }
}
// 向qt发送消息
function sendMessage(msg)
{
    if(typeof context == 'undefined')
    {
        alert("context对象获取失败！");
    }
    else
    {
        context.onMsg(msg);
    }
}
// 控件控制函数
function onBtnSendMsg()
{
    var cmd = document.getElementById("待发送消息").value;
    sendMessage(cmd);   
}
init();
var g_trace_marks = [];
// 接收qt发送的消息
function recvMessage(msg)
{
    alert("qt msg：" + msg);
	var lst;//以下为格式转换，分割成可用的数组
    lst = msg.substring(1,msg.length-1);
    lst = lst.split(",");
    //alert("the lst is: "+lst[0]+" "+lst[1]);  
	if(lst[0] == "1"){//点迹
		point = new BMap.Point(lst[1],lst[2]);
		var marker = new BMap.Marker(point); // 创建点
		map.addOverlay(marker);              // 加载标注
	}
	sendMessage(msg);  		
}