Search code examples
qtqmlqt5openstreetmapgeocode

GeocodeModel in Qt


I'm writing a the little app with using the QT/QML, and i have problem with GeocodeModel in my app. I don't know, why it doesn't work. I did it with YT tutorial, but by the man it works.

import QtQuick 2.9
import QtQuick.Controls 2.2
import QtQuick.Window 2.0
import QtLocation 5.6
import QtPositioning 5.6

ApplicationWindow {
    id: app_window
    visible: true
    width: 1024
    height: 800
    title: qsTr("Navigation")
    PositionSource {
        active: true
        onPositionChanged: {
            map_id.center = position.coordinate;
        }
    }
    Rectangle {
        id: mapRectangleID
        width: 1024
        height: 800
        anchors.horizontalCenter: parent.horizontalCenter
        anchors.verticalCenter: parent.verticalCenter
        Map {
            id: map_id
            anchors.fill: parent
            plugin: Plugin { name: "osm" }
            center: QtPositioning.coordinate(51.320729390711975,12.280097007751465)
            zoomLevel: 15
            MapQuickItem {
                //coordinate: QtPositioning.coordinate(59.91, 10.75)
                sourceItem: Image {
                    id: endPointImage
                    source: "assets/marker.png"
                    width: 40.1
                    height: 34.3
                } //size and position of maker
                anchorPoint.x: endPointImage.width / 2
                anchorPoint.y: endPointImage.height
            } //marker
            RouteModel {
                id: routeBetweenPoints
                plugin: Plugin { name: "osm" }
                query: RouteQuery {id: routeQuery }
                Component.onCompleted: {
                    routeQuery.addWaypoint(QtPositioning.coordinate(51.318784,12.2773504 ));
                    routeQuery.addWaypoint(QtPositioning.coordinate(51.3117764,12.280909000000065 ));
                    //routeQuery.addWaypoint(endPointGeaocodeModel)
                    update();
                }
            } //start and end point
            MapItemView {
                model: routeBetweenPoints
                delegate: Component {
                    MapRoute {
                        route: routeData
                        line.color: "red"
                        line.width: 10
                    }
                }
            }//linie, die beide punkte verbindet
            GeocodeModel{
                id: endPointGeaocodeModel
                plugin: Plugin { name: "osm" }
                query: "Sandakerveien 116, Oslo"
                onLocationsChanged: {
                    if (count)
                        endPointImage.coordinate = get(0).coordinate;
                }
                Component.onCompleted: update()
            } //suche den platz mit strasse und stadt
            Rectangle{
                id:_ifStartPointLongitude
                width: 100
                height: 20
                border.color: 'gray'
                border.width: 2
                x: 900
                y: 120
                anchors.left: app_window.right
                TextInput {
                    id: txtPlainStartPointLongitude
                    anchors.fill: parent
                    anchors.margins: 4
                }
            }
        } //all widgets and items of map
    } //size and position of map
}

and This element doesn't work:

GeocodeModel{
    id: endPointGeaocodeModel
    plugin: Plugin { name: "osm" }
    query: "Sandakerveien 116, Oslo"
    onLocationsChanged: {
        if (count)
            endPointImage.coordinate = get(0).coordinate;
    }
    Component.onCompleted: update()
} //suche den platz mit strasse und stadt

I tried too another cities,streets, but it still doesn't work. Can someone explain me, what i did/wrote wrong?


Solution

  • The problem is caused because the item Image does not have the coordinate property, the one who has the coordinate property is the MapQuickItem, so we must set it to that item so we must give an id to the MapQuickItem, to observe the image we will establish the center of the map to the same coordinate.

    // ...
    
    MapQuickItem {
        id: marker_id // <---
        sourceItem: Image {
            id: endPointImage
            source: "assets/marker.png"
            width: 100
            height: 100
        } //size and position of maker
        anchorPoint.x: endPointImage.width / 2
        anchorPoint.y: endPointImage.height
    } //marker
    
    // ...
    
    GeocodeModel{
        id: endPointGeaocodeModel
        plugin: Plugin { name: "osm" }
        query: "Sandakerveien 116, Oslo"
        onLocationsChanged: {
            if (count> 0){
                marker_id.coordinate = get(0).coordinate // <----
                map_id.center = get(0).coordinate // <----
            }
        }
        Component.onCompleted: update()
    } //suche den platz mit strasse und stadt
    
    // ...