如何在 QML QtLocation 地图上从 C++ Qt 代码添加 PoI

Question

Qt 菜鸟在这里。我正在尝试使用 Qt5 开发一个桌面应用程序，该应用程序读取带有 PoI gps 坐标的 json 并将它们显示在地图上。 唯一似乎能够轻松做到这一点的原生 API 是 QtLocation，它显然只是 QML。发现关于 QML，我仍然设法在我的代码中集成了一个地图，如果直接添加到 QML 甚至是一个 PoI，但我似乎无法从我的 C++ 代码在地图上动态创建它们，我不还没有真正获得 QML。我尝试了各种方法，但没有真正取得任何进展，所以我怀疑我对问题的处理方法。

这是我目前所拥有的：

main.cpp:

#include "analyserq.h"
#include <QtWidgets/QApplication>
#include <QQuickView>
#include <QQuickItem>

int main(int argc, char *argv[])
{
    QApplication a(argc, argv);
    analyserQ w;

    w.show();
    return a.exec();
}

分析器q.h：

#ifndef ANALYSERQ_H

#define ANALYSERQ_H

#include <QtWidgets/QWidget>
#include <QtWidgets>
#include "ui_analyserq.h"
#include <QQuickView>
#include <QQuickItem>
#include <qqmlengine.h>

class analyserQ : public QWidget
{
    Q_OBJECT

public:
    analyserQ(QWidget *parent = 0);
    ~analyserQ();

private:
    Ui::analyserQClass ui;
    QPushButton *button;
private slots:

};

#endif // ANALYSERQ_H

分析器q.cpp：

#include "analyserq.h"

analyserQ::analyserQ(QWidget *parent)
    : QWidget(parent)
{
    ui.setupUi(this);
    QQuickView *view = new QQuickView();
    QWidget *map = new QWidget();
    QWidget *container = QWidget::createWindowContainer(view, map);
    container->setMinimumSize(200, 200);
    container->setMaximumSize(200, 200);
    container->setFocusPolicy(Qt::TabFocus  );
    view->setSource(QUrl("map.qml"));
    button = new QPushButton(tr("&Load..."), this);

    /*QQuickView *view2 = new QQuickView(); latest attempt. failed.
    QWidget *poi = new QWidget();
    QWidget *container2 = QWidget::createWindowContainer(view2, poi);
    view2->setSource(QUrl("poi.qml"));
    container2->setParent(map);*/

    QGridLayout *mainLayout = new QGridLayout;
    mainLayout->addWidget(button, 0, 0);
    mainLayout->addWidget(map, 3, 0);
    setLayout(mainLayout);

}

analyserQ::~analyserQ()
{

}

poi.qml:

MapCircle {
            center {
                latitude: 59.9485
                longitude: 10.7686
            }
            radius: 50000.0
            color: 'blue'
            border.width: 3
        }

map.qml:

import QtQuick 2.0
import QtLocation 5.5

Rectangle {
     anchors.fill: parent

     Plugin{
        id: osmplugin
        name: "osm"
    }

     Map {
        anchors.fill: parent
        id: map
        plugin: osmplugin;
        zoomLevel: (maximumZoomLevel - minimumZoomLevel)/2//16
        center {
            // The Qt Company in Oslo
            latitude: 59.9485
            longitude: 10.7686
        }

        MapCircle {
            center {
                latitude: 59.9485
                longitude: 10.7686
            }
            radius: 500.0
            color: 'green'
            border.width: 3
        }

    }




}

编辑：我现在正在尝试通过 QML a 函数来完成它，但它不起作用。 我在我的地图元素中添加了一个函数 addPoi，并尝试从 C++ 代码中调用它。到目前为止还没有成功。

function addPoi(latitude, longitude, type) {
            console.log("Got message:");
            circle = Qt.createQmlObject('import QtLocation 5.3; MapCircle {  center{latitude: 59.9485; longitude: 10.7686} }', map, "dynamic");
            if(circle == null) {
               console.log("error creating object" +  circle.errorString());
            }

            circle.radius = 5000.0;
            circle.color = 'blue';
            circle.border.width = 3;
            map.addMapItem(circle);
            return "some return value";
        }

在 analyserq.cpp 中添加：

QMetaObject::invokeMethod(map, "addPoi",
        Q_RETURN_ARG(QVariant, returnedValue),
        Q_ARG(QVariant, latitude), Q_ARG(QVariant, longitude), Q_ARG(QVariant, type));
    qDebug() << "QML function returned:" << returnedValue.toString();

Answer 1

好的，我设法通过从我的代码调用的 QML 中的 JS 函数来做到这一点。以下是相关部分：

analyzerq.cpp

    QObject *rootObj;
analyserQ::analyserQ(QWidget *parent)
    : QWidget(parent)
{
    ui.setupUi(this);
    QQuickView *view = new QQuickView();
    QWidget *map = new QWidget();
    QWidget *container = QWidget::createWindowContainer(view, map);
    container->setMinimumSize(400, 450);
    container->setMaximumSize(800, 800);
    container->setSizePolicy(QSizePolicy::Expanding, QSizePolicy::Expanding);
    container->setFocusPolicy(Qt::TabFocus  );
    view->setSource(QUrl("map.qml"));

    button = new QPushButton(tr("&Load..."), this);
    connect(button, &QAbstractButton::clicked, this, &analyserQ::loadPoI);


    label = new QLabel(tr("Choix Trajets."), this);

    liste = new QComboBox;
    liste->setEditable(false);
    liste->addItem("1");

    loadCombobox();

    QGridLayout *mainLayout = new QGridLayout;
    mainLayout->addWidget(button, 0, 0);
    mainLayout->addWidget(map, 1, 0);

    mainLayout->addWidget(label, 5, 0);

    mainLayout->addWidget(liste, 5,1);


    setLayout(mainLayout);
    rootObj = view->rootObject();

[...]

void analyserQ::addPoI(QVariant latitude, QVariant longitude, QVariant type)
{
    QVariant returnedValue;

    QMetaObject::invokeMethod(this->rootObj, "addPoi",
        Q_RETURN_ARG(QVariant, returnedValue),
        Q_ARG(QVariant, latitude), Q_ARG(QVariant, longitude), Q_ARG(QVariant, type));
    qDebug() << "QML function returned:" << returnedValue.toString();
}

map.qml

import QtQuick 2.0
import QtLocation 5.5
import QtPositioning 5.2



Rectangle {
     anchors.fill: parent

     Plugin{
        id: osmplugin
        name: "osm"
    }
    function addPoi(lat,longi,type) {
            //console.log("Got message:", lat);
            //console.log("Got message:", longi);
            //console.log("Got message:");
            //var lat = lat;
            var circle = Qt.createQmlObject('import QtLocation 5.3; MapCircle {   }', map, "dynamic");
            if(circle == null) {
               console.log("error creating object" +  circle.errorString());
               return false;
            }
            circle.center = QtPositioning.coordinate(lat, longi);
            circle.radius = 500.0;

            if(type == 0){
                circle.color = 'blue';
            }
            else if(type == 1){
                circle.color = 'yellow';
            }
            else if(type == 2){
                circle.color = 'red';
            }
            else if(type == 3){
                circle.color = 'green';
            }
            circle.border.width = 1;
            map.addMapItem(circle);
            map.center = QtPositioning.coordinate(lat, longi);
            console.log("success creating object");
            return true;
        }

下一步：使 PoI 可点击...