如何在地图上拖动多个目标?
How to drag multiple targets on a map?
我想实现一个功能,用户可以在地图上拖动标记(定义为MapQuickItem)并自动更改其路径(定义为地图折线)。目前我只能拖动标记,不知道如何改变它的路径
如果我想在Map下定义一个DropArea并调用MapPolyline.removeCoordinate() 函数改变路径,如何访问delegate中的索引?而且我不确定这个想法是否可行。
代码如下:
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 */
}
}
}
我尝试了几种方法来解决问题。
- 此方法不可行,因为事件 (drag.onActiveChanged) 仅在拖动事件发生时触发。
drag.onActiveChanged: {
if(mouseArea.drag.active) {
line.replaceCoordinate(index, marker.coordinate);
}
}
我试图在 Map 下定义一个 DropArea 并调用 drag.ondragStarted()函数来触发事件,但是没搞清楚delegate中怎么访问index,就放弃了。
成功了!当我在地图上拖动标记时,路径自动改变了!每次标记坐标改变时触发事件(onPositionChanged)。
onPositionChanged: {
line.replaceCoordinate(index, marker.coordinate);
}
谢谢自己:-)
我想实现一个功能,用户可以在地图上拖动标记(定义为MapQuickItem)并自动更改其路径(定义为地图折线)。目前我只能拖动标记,不知道如何改变它的路径
如果我想在Map下定义一个DropArea并调用MapPolyline.removeCoordinate() 函数改变路径,如何访问delegate中的索引?而且我不确定这个想法是否可行。
代码如下:
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 */
}
}
}
我尝试了几种方法来解决问题。
- 此方法不可行,因为事件 (drag.onActiveChanged) 仅在拖动事件发生时触发。
drag.onActiveChanged: {
if(mouseArea.drag.active) {
line.replaceCoordinate(index, marker.coordinate);
}
}
我试图在 Map 下定义一个 DropArea 并调用 drag.ondragStarted()函数来触发事件,但是没搞清楚delegate中怎么访问index,就放弃了。
成功了!当我在地图上拖动标记时,路径自动改变了!每次标记坐标改变时触发事件(onPositionChanged)。
onPositionChanged: {
line.replaceCoordinate(index, marker.coordinate);
}
谢谢自己:-)