如何在鼠标区域中将组件拖放到地图上并获取实时地图坐标

Question

我想拖动一个在组件内部声明并从地图获取实时坐标的MapQuickItem。当运行代码时，我得到这样的错误“ qrc：/main.qml：15：ReferenceError：mouseArea未定义”。如何在组件外部访问mouseAea？或在哪里声明dragged属性以获取mousearea访问权限？

Window {
id: window
width: 800
height: 800
visible: true

property bool dragged: mouseArea.drag.active

Plugin
{
    id: hereMaps
    name: "here"
    PluginParameter { name: "here.app_id"; value: "oBB4FivcP23m2UZQCj8K" }
    PluginParameter { name: "here.token"; value: "P-D8XRRGeVt0YphUuOImeA" }
}

Map {
    id: mapOfWorld
    anchors.centerIn: parent;
    anchors.fill: parent
    activeMapType: supportedMapTypes[1];
    zoomLevel: 18
    plugin: hereMaps
    center: QtPositioning.coordinate(19.997454, 73.789803)
    MouseArea{
        id : mapAreaClick
        height: mapOfWorld.height
        width: mapOfWorld.width
        hoverEnabled: true
        anchors.fill: mapOfWorld
        preventStealing : true
        propagateComposedEvents : true
        anchors.centerIn: mapOfWorld
    }

       Component {    // here error occurs
        id : test 
    MapQuickItem
        {
            id: anchor
           coordinate: QtPositioning.coordinate(19.997454, 73.789803)
            sourceItem: Item {
                Rectangle {
                    id: handle
                    color: "red"
                    width: 40
                    height: 40
                    radius: 40
                    x: anchor.x - width
                    y: anchor.y - height
                    Drag.active: true
                    MouseArea {
                        id: mouseArea
                        drag.target: handle
                        drag.threshold: 0
                        anchors.fill: parent
                    }

                    Connections {
                        target: anchor
                        onXChanged: if (!dragged) x = anchor.x - width
                        onYChanged: if (!dragged) y = anchor.y - height
                    }

                    onXChanged: {
                        console.log("X:"+x)
                        var cordinate = mapOfWorld.toCoordinate((Qt.point((x),(y))));
                        console.log("onXChanged :" , cordinate)
                        if (dragged) anchor.x = x + width
                    }
                    onYChanged:{
                        console.log("Y:"+y)
                        var cordinate = mapOfWorld.toCoordinate((Qt.point((x),(y))));
                        console.log("onYChanged : ", cordinate)
                        if (dragged) anchor.y = y + height
                    }
                }
            }
       }
    }
   }
   }

Answer 1

Window {
    id: window
    width: 800
    height: 800
    visible: true

    //property bool dragged: mouseArea.drag.active

    Plugin {
        id: hereMaps
        name: "here"
        PluginParameter { name: "here.app_id"; value: "oBB4FivcP23m2UZQCj8K" }
        PluginParameter { name: "here.token"; value: "P-D8XRRGeVt0YphUuOImeA" }
    }

    Map {
        id: mapOfWorld
        anchors.centerIn: parent;
        anchors.fill: parent
        activeMapType: supportedMapTypes[1];
        zoomLevel: 18
        plugin: hereMaps
        center: QtPositioning.coordinate(19.997454, 73.789803)
        MouseArea{
            id : mapAreaClick
            height: mapOfWorld.height
            width: mapOfWorld.width
            hoverEnabled: true
            anchors.fill: mapOfWorld
            preventStealing : true
            propagateComposedEvents : true
            anchors.centerIn: mapOfWorld
        }

        Component {    // here error occurs
            id : test 
            MapQuickItem
            {
                id: anchor
                property bool dragged: mouseArea.drag.active //moved here
                coordinate: QtPositioning.coordinate(19.997454, 73.789803)
                sourceItem: Item {
                    Rectangle {
                        id: handle
                        color: "red"
                        width: 40
                        height: 40
                        radius: 40
                        x: anchor.x - width
                        y: anchor.y - height
                        Drag.active: true
                        MouseArea {
                            id: mouseArea
                            drag.target: handle
                            drag.threshold: 0
                            anchors.fill: parent
                        }

                        Connections {
                            target: anchor
                            onXChanged: if (!dragged) x = anchor.x - width
                            onYChanged: if (!dragged) y = anchor.y - height
                        }

                        onXChanged: {
                            console.log("X:"+x)
                            var cordinate = mapOfWorld.toCoordinate((Qt.point((x),(y))));
                            console.log("onXChanged :" , cordinate)
                            if (dragged) anchor.x = x + width
                        }
                        onYChanged:{
                            console.log("Y:"+y)
                            var cordinate = mapOfWorld.toCoordinate((Qt.point((x),(y))));
                            console.log("onYChanged : ", cordinate)
                            if (dragged) anchor.y = y + height
                        }
                    }
                }
            }
        }
        //create our anchor object///
        Component.onCompleted : {
            mapAnchor = test.createObject()
            mapOfWorld.addMapItem(mapAnchor)

        }
    }
}