【QML】 嵌入高德地图

需求
    将高德地图嵌入QMl中使用

---

实现方式
 1. 创建C++类，定义多个信号（后续与html函数绑定）， 用于操作地图
 2. 在QMl中使用webengine访问网络，创建webchannel，准备后续将html中的函数与c++类的信号绑定
 3. 使用高德地图JS API ，地图显示部分使用html， 将html中的函数与c++类的信号绑定
 4. 发送信号就可以操纵地图了

---

代码   

class MapController :public QObject
{
    Q_OBJECT
    Q_PROPERTY(QString address READ getAddress NOTIFY addressChanged)

public:
    MapController(QObject* parent=nullptr){}
    QString getAddress(){return m_Address;}
signals:
    void setMapLocation(QString lat, QString lon); //设置地图显示中心点
    void addressChanged();

private:
    QString m_Address;

};

qml部分，仅列出了关键部分

MapController{
        id: mapController
        WebChannel.id: "mapController" //html中要用到该属性建立channel
}

//创建webchannel 
WebChannel {
        id: channel
        registeredObjects: [mapController]
}

//创建webengine
WebEngineView {
        id: webview
        anchors.top: btnRow.bottom
        width:parent.width
        height: 400
        url: "qrc:/index.html" //显示地图的html
        webChannel: channel
 }

 

html部分，可参照高德API 自行添加功能，使用替换自己的key

---

现在发送C++里的信号就可以直接调用到html的函数啦~