Блог

Я хотел реализовать функцию, с помощью которой пользователи могут перетаскивать маркер (который определяется как MapQuickItem) на карту и автоматически изменять его путь (который определяется как MapPolyline). В настоящее время я могу только перетащить маркер, но не знаю, как изменить его путь.

Если я хочу определить область выпадающего списка под картой и вызвать функцию MapPolyline.removeCoordinate(), чтобы изменить путь, как перейти к индексу в делегате? И я не уверен, сработает ли эта идея.

Вот код:

     Map {
        id: map
        anchors.fill: parent
        plugin: mapPlugin
        zoomLevel: 14
        activeMapType: supportedMapTypes[7]

        /* maker */
        MouseArea {
            anchors.fill: parent
            onClicked: {
                var crd = map.toCoordinate(Qt.point(mouseX, mouseY))
                console.log(crd)
                markerModel.append({ "latitude": crd.latitude, "longitude": crd.longitude})
                line.addCoordinate(crd)
            }
        }

        MapItemGroup {
            MapPolyline {
                id: line
                line.width: 3
                line.color: "#515151"
            }

            MapItemView {
                add: Transition {}

                remove: Transition {}

                model: ListModel {
                    id: markerModel
                }

                delegate:
                    MapQuickItem {
                        id: marker
                        coordinate: QtPositioning.coordinate(latitude, longitude)
                        anchorPoint: Qt.point(markerImage.width * 0.5, markerImage.height * 0.5)

                        sourceItem: Image {
                            id: markerImage
                            z: 5
                            width: 30
                            height: 30
                            source: index <= 0 ? "Images/starting point.svg" : "Images/point black.svg"
                            MouseArea {
                                anchors.fill: parent

                                onClicked: {
                                    line.removeCoordinate(index);
                                    markerModel.remove(index);
                                }

                                drag.target: marker
                            }
                        }
                    }
                /* maker */
            }
        }
    }
  

Я попробовал несколько методов решения проблемы.

1. Этот метод невозможен, потому что событие (drag.onActiveChanged) запускается только в тот момент, когда происходит событие перетаскивания.

 drag.onActiveChanged: {
    if(mouseArea.drag.active) { 
            line.replaceCoordinate(index, marker.coordinate); 
    }   
}
  

2. Я попытался определить выпадающую область под картой и вызвал функцию drag.ondragStarted() для запуска события, но я не понял, как перейти к индексу в делегате, затем я сдался.

3. Это сработало! Когда я перетаскивал маркер на карте, путь автоматически менялся! Событие (onPositionChanged) запускается каждый раз, когда изменяется координата маркера.

 onPositionChanged: {
    line.replaceCoordinate(index, marker.coordinate);
}
  

Благодарю себя 🙂