Question

如何在Qt中的ui表单上显示OpenStreetMap？在mainwindow.ui的主窗口中。我需要一张互动地图。传输纬度，点的经度并添加关于点的信息。

如何使此示例具有交互性并显示在mainwindow.ui表单上？

main.cpp：

#include <QGuiApplication>
#include <QQuickView>

int main(int argc, char **argv)
{
    QGuiApplication app(argc,argv);
    QQuickView view;
    view.setSource(QUrl(QStringLiteral("qrc:///places_map.qml")));
    view.setWidth(360);
    view.setHeight(640);
    view.show();
    return app.exec();
}

places_map.qml：

import QtQuick 2.0
import QtPositioning 5.5
import QtLocation 5.6
//! [Imports]

Rectangle {
    anchors.fill: parent

    //! [Initialize Plugin]
    Plugin {
        id: myPlugin
        name: "osm" // "mapboxgl", "esri", ...
        //specify plugin parameters if necessary
        //PluginParameter {...}
        //PluginParameter {...}
        //...
    }
    //! [Initialize Plugin]

    //! [Current Location]
    PositionSource {
        id: positionSource
        property variant lastSearchPosition: locationOslo
        active: true
        updateInterval: 120000 // 2 mins
        onPositionChanged:  {
            var currentPosition = positionSource.position.coordinate
            map.center = currentPosition
            var distance = currentPosition.distanceTo(lastSearchPosition)
            if (distance > 500) {
                // 500m from last performed pizza search
                lastSearchPosition = currentPosition
                searchModel.searchArea = QtPositioning.circle(currentPosition)
                searchModel.update()
            }
        }
    }
    //! [Current Location]

    //! [PlaceSearchModel]
    property variant locationOslo: QtPositioning.coordinate( 59.93, 10.76)

    PlaceSearchModel {
        id: searchModel

        plugin: myPlugin

        searchTerm: "Pizza"
        searchArea: QtPositioning.circle(locationOslo)

        Component.onCompleted: update()
    }
    //! [PlaceSearchModel]

    //! [Places MapItemView]
    Map {
        id: map
        anchors.fill: parent
        plugin: myPlugin;
        center: locationOslo
        zoomLevel: 13

        MapItemView {
            model: searchModel
            delegate: MapQuickItem {
                coordinate: place.location.coordinate

                anchorPoint.x: image.width * 0.5
                anchorPoint.y: image.height

                sourceItem: Column {
                    Image { id: image; source: "marker.png" }
                    Text { text: title; font.bold: true }
                }
            }
        }
    }
    //! [Places MapItemView]

    Connections {
        target: searchModel
        onStatusChanged: {
            if (searchModel.status == PlaceSearchModel.Error)
                console.log(searchModel.errorString());
        }
    }
}

Answer 1

至少有两种使用QtDesigner的方法

<强> 1。使用Qt Designer的QQuickWidget插件

Qt Designer是QtCreator用来修改.ui的工具，因此它有更多使用的小部件插件，在我的例子中我有如下所示

然后转到属性视图，在源代码中放置.qml的url，因为它显示以下图像：

然后我们添加到.pro：

QT += quickwidgets

<强> 2。如果您没有，我们可以使用窗口小部件并将其作为继承自QQuickWidget

的类进行宣传

为此，我们创建了一个继承自QQuickWidget的类：

#ifndef QUICKWIDGET_H
#define QUICKWIDGET_H

#include <QQuickWidget>

class QuickWidget: public QQuickWidget
{
public:
    QuickWidget(QWidget *parent = Q_NULLPTR):QQuickWidget(parent){
        setSource(QUrl("qrc:/places_map.qml"));
        setResizeMode(QQuickWidget::SizeRootObjectToView);
    }
};

#endif // QUICKWIDGET_H

然后我们拖动QtDesigner Widget

然后我们右键单击选择Promote to...，之后我们会获得一个菜单，其中我们放置图片中显示的值，按add按钮，然后按promote按钮：

然后我们添加到.pro：

QT += quickwidgets

这两个示例都在以下link

中

Qt

1 个答案: