【QML】嵌入高德地图

最新推荐文章于 2024-07-29 17:24:40 发布

六碗铁biu_

最新推荐文章于 2024-07-29 17:24:40 发布

阅读量1.4k

点赞数 1

文章标签： qml 地图

本文链接：https://blog.csdn.net/qq_30042269/article/details/86636621

版权

需求
将高德地图嵌入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

<!doctype html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
        <title>地图</title>
        <link rel="stylesheet" href="http://cache.amap.com/lbs/static/main1119.css"/>
        <script type="text/javascript"
                src="http://webapi.amap.com/maps?v=1.4.3&key=your key"></script>
        <script type="text/javascript" src="http://cache.amap.com/lbs/static/addToolbar.js"></script>
        <script type="text/javascript" src="qrc:///qtwebchannel/qwebchannel.js"></script>
        <script type="text/javascript">

            var mymap;
            function output(message) {
                var output = document.getElementById("output");
                output.innerHTML = output.innerHTML + message + "<br>";
            }
            var strLat ;
            var strLon;

            function newMap(lat, lon)
            {
                strLat = lat;
                strLon = lon;
                mymap = new AMap.Map('container', {
                                resizeEnable: true,
                                center: [lon, lat],
                                zoom:13
                            });
                mymap.on('complete', function() {
                    output("地图图块加载完毕！当前地图中心点为：" + mymap.getCenter());
                });

                mymap.on('click', showInfoClick);
            }

            

            window.onload = function() {
                new QWebChannel(qt.webChannelTransport, function(channel) {
                    // 与QML中的 WebChannel.id（"mapController"） 绑定
                    var mapcontroller = channel.objects.mapController;

                    // connect to a signal("setMapLocation")
                    mapcontroller.setMapLocation.connect(function(lat,lon) {
                        output("Got signal: " + lat+lon);
                        newMap(lat, lon);
                    });

                    output("Connected to WebChannel, ready to send/receive messages!");
                });
             }
        </script>
    </head>
    <body>

        <div id="output" style="background-color:#FF0000;height:480px;width:200px;float:right;"></div>
        <div id="container" style="background-color:#EEEEEE;height:300px;width:1000px;float:output;"></div>
    </body>
</html>

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