QtQuick：在地图上拖动 MapQuickItem

Question

我想实现自动拖动

MapQuickItem

。简单的例子：

MapQuickItem {
    id: markerItem

    sourceItem: Rectangle {
        id: sourceRect
        color: "red"
        width: 20
        height: 20
        x: 0
        y: 0

        MouseArea {
            drag.target: markerItem
            cursorShape: drag.active ? Qt.ClosedHandCursor : Qt.OpenHandCursor
            anchors.fill: parent
        }
    }
    Drag.active: true
}

重点是，如果我快速拖动，一旦光标离开标记，拖动就会中断。有没有办法让它正常工作？

Answer 1

我找到了一种解决方法：使用单独的可拖动

QQuickItem

和锚点

MapQuickItem

：

MapQuickItem {
    id: anchor
    sourceItem: Item {}
}

Rectangle {
    id: handle

    property bool dragged: mouseArea.drag.active

    color: "red"
    width: 20
    height: 20
    x: anchor.x - width
    y: anchor.y - height

    MouseArea {
        id: mouseArea
        enabled: draggable
        drag.target: handle
        drag.threshold: 0
        anchors.fill: parent
        cursorShape: dragged ? Qt.ClosedHandCursor : Qt.OpenHandCursor
    }

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

    onXChanged: if (dragged) anchor.x = x + width
    onYChanged: if (dragged) anchor.y = y + height

    Drag.active: true
}

动态填充并不是超级方便

QML Map

，但可以完成工作

Answer 2

这是动态填充地图的解决方案。

import QtQuick
import QtLocation
import QtPositioning

Rectangle {
    anchors.fill: parent
    id: mapRectangle

    Map {
        id: map
        anchors.fill: parent
        center: QtPositioning.coordinate(40.021468, 26.194329)
        zoomLevel: 14
        copyrightsVisible: false

        plugin:   Plugin {
            id: mapPlugin
            name: "osm"
            PluginParameter {name: "osm.mapping.providersrepository.disabled";value:true}
        }

        DragHandler{
            id: drag
            target: null
            onTranslationChanged: (delta) => map.pan(-delta.x, -delta.y)
        }
        WheelHandler{
            id: wheel
            rotationScale: 1/100
            property: "zoomLevel"
        }

        MapItemView{
            model: ListModel{
                id: pinPointModel
            }
            delegate: pinPointComponent
        }
    }

    Component{
        id: pinPointComponent
        MapQuickItem{
            coordinate: QtPositioning.coordinate(latitude, longitude)
            id:marker
            anchorPoint.x: image.width/2
            anchorPoint.y: image.height

            sourceItem:Rectangle{
                id: image
                width: 50
                height: 50
                color: "red"
            }
            TapHandler{
                id: tapHandler
                acceptedButtons: Qt.RightButton
                gesturePolicy: TapHandler.WithinBounds
                onTapped: {
                    console.log(marker.coordinate.latitude+", "+marker.coordinate.longitude)
                }
            }

            DragHandler{
                id: dragHandler
                grabPermissions: PointHandler.CanTakeOverFromItems | PointHandler.CanTakeOverFromHandlersOfDifferentType
            }
        }
    }

    MouseArea{
        anchors.fill: parent
        onPressAndHold: {
            var crd = map.toCoordinate(Qt.point(mouseX, mouseY))
            pinPointModel.append({"latitude": crd.latitude, "longitude": crd.longitude})
        }
    }
}