How to drag multiple targets on a map? - qt

Question

I wanted to implement a function that users can drag the marker (which is defined as MapQuickItem) on the map and automatically change its path (which is defined as MapPolyline). Currently I can only drag the marker but don't know how to change its path.
If I want to define a DropArea under the Map and call the MapPolyline.removeCoordinate() function to change the path, how to visit the index in the delegate? And I'm not sure if this idea will work.
Here is the code:
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 */
}
}
}

Answer 1

I have tried several methods to solve the problem.
This method is not feasible cos the event (drag.onActiveChanged) is triggered only at the moment that the drag event happens.
drag.onActiveChanged: {
if(mouseArea.drag.active) {
line.replaceCoordinate(index, marker.coordinate);
}
}
I tried to define a DropArea under the Map and called the drag.ondragStarted() function to trigger the event, but I didn't figure out how to visit the index in the delegate, then I gave up.
It worked! When I dragged the marker on the map, the path automatically changed! The event (onPositionChanged) is triggered everytime the coordinate of marker changes.
onPositionChanged: {
line.replaceCoordinate(index, marker.coordinate);
}
Thank myself :-)