Back to Qt.io
Contact Us Blog Download Qt
Auf dieser Seite

Orte (QML)

Das Beispiel „Orte“ veranschaulicht, wie man nach Orten sucht und auf zugehörige Inhalte zugreift.

Beispiel für „Orte“ mit einem Suchfeld und einer Karte von Oslo, auf der eine Markierung mit der Bezeichnung „The Qt Company“ zu sehen ist

Das Beispiel „Orte“ veranschaulicht, wie man nach Orten sucht. Insbesondere wird gezeigt, wie weitere Informationen wie Bewertungen, Bilder und zugehörige Inhalte abgerufen werden können.

Ausführen des Beispiels

Sie können das Beispiel ausführen unter:

Das Beispiel funktioniert mit jedem der verfügbaren Geodienst-Plugins. Einige Plugins benötigen jedoch möglicherweise zusätzliche „ plugin parameters “, um korrekt zu funktionieren. „ Plugin parameters “ kann über die Befehlszeile mit dem Argument „ --plugin “ übergeben werden, das folgende Form hat:

--plugin.<parameter name> <parameter value>

Einzelheiten dazu, welche Plugin-Parameter unterstützt werden, finden Sie in der Dokumentation der jeweiligen Geodienst-Plugins. Das in diesem Beispiel verwendete Standard-Plugin ist das OpenStreetMap-Plugin vonQt Location , das keine Parameter erfordert.

Übersicht

Das Beispiel „Places“ zeigt ein Anwendungsfenster mit einer Karte. Im oberen Bereich des Fensters befindet sich ein Suchfeld, in das Suchanfragen für Orte eingegeben werden können. Um nach einem Ort zu suchen, geben Sie einen Suchbegriff in das Textfeld ein und klicken Sie auf das Lupensymbol. Um nach einem Ort nach Kategorie zu suchen, klicken Sie auf das Kategoriesymbol, um die Liste der verfügbaren Kategorien anzuzeigen, und wählen Sie die gewünschte Kategorie aus. Die Ortssuche bezieht sich auf Orte, die sich in der Nähe des aktuell auf der Karte angezeigten Standorts befinden.

Bei einigen Plugins bietet das Suchfeld Suchvorschläge an, sobald drei oder mehr Zeichen eingegeben wurden. Durch Auswahl eines der Vorschläge wird eine Ortssuche mit dem ausgewählten Suchtext durchgeführt.

Durch Klicken auf ein Suchergebnis werden Details zum Ort angezeigt. Verfügt ein Ort über umfangreiche Inhalte (Beiträge, Bewertungen und Bilder), können diese über die Schaltflächen auf der Detailseite aufgerufen werden. Um ähnliche Orte zu finden, klicken Sie auf die Schaltfläche „Ähnliche Orte finden“.

Der Geodienstanbieter kann über das Menü „Anbieter“ geändert werden.

Kategorien anzeigen

Bevor eine Suche nach Kategorien durchgeführt werden kann, muss die Liste der verfügbaren Kategorien abgerufen werden. Dies geschieht durch die Erstellung eines „ CategoryModel “.

CategoryModel {
    id: categoryModel
    hierarchical: true
}

Der Typ „ CategoryModel “ stellt ein Modell der verfügbaren Kategorien bereit. Er kann entweder eine flache Liste oder ein hierarchisches Baummodell bereitstellen. In diesem Beispiel verwenden wir ein hierarchisches Baummodell, indem wir die Eigenschaft „ hierarchical “ auf „true“ setzen. Die Eigenschaft „ plugin “ wird bei der Initialisierung des Beispiels festgelegt.

Als Nächstes erstellen wir ein ` ListView `, um das Kategorienmodell anzuzeigen.

ListView {
    id: root
    property var categoryModel
    property var rootIndex

    signal searchCategory(var category)
    signal showSubcategories(var index)

    snapMode: ListView.SnapToItem

    model: DelegateModel {
        id: delegeteDataModel
        model: root.categoryModel
        rootIndex: root.rootIndex
        delegate: CategoryDelegate {
            width: ListView.view.width
            onSearchCategory: root.searchCategory(category);
            onShowSubcategories: root.showSubcategories(delegeteDataModel.modelIndex(index));
        }
    }
}

Da ein hierarchisches Modell verwendet wird, ist ein „ DelegateModel “ erforderlich, um Navigationsfunktionen bereitzustellen. Würde ein flaches Listenmodell verwendet, könnte die Ansicht die Eigenschaft „ CategoryModel “ direkt nutzen.

Die Eigenschaft „rootIndex“ legt den Stammindex des „ DelegateModel “ fest. Kategorien werden vom „CategoryDelegate“ angezeigt, der zwei Signale bereitstellt. Der „onShowSubcategories“-Handler sendet das Signal „showSubcategories()“ mit dem Stammindex als aktuellem Index aus, wodurch die Unterkategorien der ausgewählten Kategorie angezeigt werden. Der „onSearchCategory“-Handler sendet das Signal „searchCategory()“ mit einem „category“-Parameter aus, der angibt, welche bestimmte Kategorie ausgewählt wurde.

Der „CategoryDelegate“ zeigt den Kategorienamen an und sendet das Signal „searchCategory()“, wenn auf den „ Label “ geklickt wird:

Label {
    id: labelItem
    text: category.name
    anchors.left: icon.right
    anchors.right: parent.right
    anchors.verticalCenter: parent.verticalCenter
}

TapHandler {
    id: tapHanlder
    onTapped: {
        if (model.hasModelChildren) {
            root.showSubcategories()
        } else {
            root.searchCategory()
        }
    }
}

Anzeige von Suchvorschlägen

Der Typ „ PlaceSearchSuggestionModel “ wird verwendet, um Suchvorschläge auf der Grundlage eines teilweise eingegebenen Suchbegriffs abzurufen.

Eine neue Suchvorschlagsabfrage wird ausgelöst, sobald der eingegebene Suchbegriff geändert wird.

SearchBar {
    id: searchBar
    onSearchTextChanged: function (searchText) {
        if (searchText.length >= 3 && suggestionModel != null) {
            suggestionModel.searchTerm = searchText;
            suggestionModel.update();
        }
    }
}

Vorschläge werden nur abgefragt, wenn der Suchbegriff aus mindestens drei Zeichen besteht.

Wenn sich der Status des „ PlaceSearchSuggestionModel “ ändert, werden Suchvorschläge angezeigt.

PlaceSearchSuggestionModel {
    id: suggestionModel
    searchArea: searchRegion

    onStatusChanged: {
        if (status == PlaceSearchSuggestionModel.Ready)
            stackView.showSuggestions()
    }
}

Das Hauptobjekt im Zustand „SuggestionsShown“ ist das „ ListView “, das die Suchvorschläge anzeigt.

ListView {
    id: suggestionView
    property var suggestionModel
    signal suggestionSelected(string text)

    model: suggestionModel
    delegate: Item {
        width: ListView.view.width
        height: label.height * 1.5
        Label {
            id: label
            text: suggestion
        }
        MouseArea {
            anchors.fill: parent
            onClicked: suggestionSelected(suggestion)
        }
    }
}

Ein „ Label “-Objekt wird als Delegat verwendet, um den Vorschlagstext anzuzeigen. Durch Klicken auf den vorgeschlagenen Suchbegriff wird dieser aktualisiert und eine Ortssuche anhand des Suchvorschlags ausgelöst.

Suche nach Orten

Der Typ „ PlaceSearchModel “ wird zur Suche nach Orten verwendet.

PlaceSearchModel {
    id: placeSearchModel
    searchArea: searchRegion

    function searchForCategory(category) {
        searchTerm = "";
        categories = category;
        recommendationId = "";
        searchArea = searchRegion
        limit = -1;
        update();
    }

    function searchForText(text) {
        searchTerm = text;
        categories = null;
        recommendationId = "";
        searchArea = searchRegion
        limit = -1;
        update();
    }

    function searchForRecommendations(placeId) {
        searchTerm = "";
        categories = null;
        recommendationId = placeId;
        searchArea = null;
        limit = -1;
        update();
    }

    onStatusChanged: {
        switch (status) {
        case PlaceSearchModel.Ready:
            if (count > 0)
                stackView.showPlaces()
            else
                stackView.showMessage(qsTr("Search Place Error"),qsTr("Place not found !"))
            break;
        case PlaceSearchModel.Error:
            stackView.showMessage(qsTr("Search Place Error"),errorString())
            break;
        }
    }
}

Zunächst werden einige Eigenschaften des Modells festgelegt, die zur Erstellung der Suchanfrage verwendet werden. Die Eigenschaft „ searchArea “ wird auf das Objekt „searchRegion“ gesetzt, bei dem es sich um ein „ geoCircle “ handelt, dessen Mittelpunkt mit dem aktuell auf Map angezeigten Standort verknüpft ist.

Abschließend definieren wir drei Hilfsfunktionen: `searchForCategory()`, `searchForText() ` und `searchForRecommendations() `, die entweder die Eigenschaften ` categories `, ` searchTerm ` oder ` recommendationId ` setzen und die Methode ` update()` aufrufen, um die Ortssuche zu starten. Die Suchergebnisse werden in einem ` ListView` angezeigt.

ListView {
    id: searchView

    property var placeSearchModel
    signal showPlaceDetails(var place, var distance)
    signal showMap()

    model: placeSearchModel
    delegate: SearchResultDelegate {
        width: ListView.view.width
        onShowPlaceDetails: function (place, distance) { searchView.showPlaceDetails(place, distance) }
        onSearchFor: function (query) { placeSearchModel.searchForText(query) }
    }

    footer: RowLayout {
        width: parent.width

        Button {
            text: qsTr("Previous")
            enabled: placeSearchModel.previousPagesAvailable
            onClicked: placeSearchModel.previousPage()
            Layout.alignment: Qt.AlignHCenter
        }

        Button {
            text: qsTr("Clear")
            onClicked: {
                placeSearchModel.reset()
                showMap()
            }
            Layout.alignment: Qt.AlignHCenter
        }

        Button {
            text: qsTr("Next")
            enabled: placeSearchModel.nextPagesAvailable
            onClicked: placeSearchModel.nextPage()
            Layout.alignment: Qt.AlignHCenter
        }
    }
}

Der in „ ListView “ verwendete Delegat „SearchResultDelegate“ ist so konzipiert, dass er über ein „ Loader “-Objekt mehrere Suchergebnistypen verarbeiten kann. Für Ergebnisse vom Typ „PlaceResult“ lautet der Delegat:

Component {
    id: placeComponent
    Item {
        id: placeRoot
        width: root.width
        height: Math.max(icon.height, 3 * placeName.height)

        Rectangle {
            anchors.fill: parent
            color: "#44ffffff"
            visible: mouse.pressed
        }

        Rectangle {
            anchors.fill: parent
            color: "#dbffde"
            visible: model.sponsored !== undefined ? model.sponsored : false

            Label {
                text: qsTr("Sponsored result")
                horizontalAlignment: Text.AlignRight
                anchors.right: parent.right
                anchors.bottom: parent.bottom
                font.pixelSize: 8
                visible: model.sponsored !== undefined ? model.sponsored : false
            }
        }

        GridLayout {
            rows: 2
            columns: 2
            anchors.fill: parent
            anchors.leftMargin: 30
            flow: GridLayout.TopToBottom

            Image {
                // anchors.verticalCenter: parent.verticalCenter
                id:icon
                source: place.favorite ? Qt.resolvedUrl("../resources/star.png") : place.icon.url()
                Layout.rowSpan: 2
            }

            Label {
                id: placeName
                text: place.favorite ? place.favorite.name : place.name
                Layout.fillWidth: true
            }

            Label {
                id: distanceText
                font.italic: true
                text: Helper.formatDistance(distance)
                Layout.fillWidth: true
            }
        }

        Rectangle {
            anchors.left: parent.left
            anchors.right: parent.right
            anchors.margins: 15
            height: 1
            color: "#46a2da"
        }

        MouseArea {
            id: mouse
            anchors.fill: parent
            onClicked: {
                if (model.type === undefined || type === PlaceSearchModel.PlaceResult) {
                    if (!place.detailsFetched)
                        place.getDetails();
                    root.showPlaceDetails(model.place, model.distance);
                }
            }
        }
    }
}

Anzeigen von Ortsinhalten

Orte können zusätzliche Rich-Content-Inhalte enthalten, darunter redaktionelle Beiträge, Bewertungen und Bilder. Der Zugriff auf Rich-Content erfolgt über eine Reihe von Modellen. Inhaltsmodelle werden in der Regel nicht direkt vom Anwendungsentwickler erstellt, sondern über die Eigenschaften „ editorialModel “, „ reviewModel “ und „ imageModel “ des Typs „ Place “ abgerufen.

ListView {
    id:view
    property Place place
    signal showEditorial(var editorial)
    model: place.editorialModel
    delegate: EditorialDelegate {
        width: ListView.view.width
        onShowEditorial: view.showEditorial(model)
    }
}

Beispielprojekt @ code.qt.io

© 2026 The Qt Company Ltd. Documentation contributions included herein are the copyrights of their respective owners. The documentation provided herein is licensed under the terms of the GNU Free Documentation License version 1.3 as published by the Free Software Foundation. Qt and respective logos are trademarks of The Qt Company Ltd. in Finland and/or other countries worldwide. All other trademarks are property of their respective owners.