如何在qt qml中更改地图上委托组件的颜色

Question

我正在使用 MapQuickItem 作为地图上的委托组件。我有三个组成部分。当我点击 component.And 时，我想改变委托组件的颜色，其余的都是一样的 colour.How 以仅更改所选组件颜色的颜色

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

Map {
    id: map
    anchors.fill: parent
    activeMapType: supportedMapTypes[1];
    zoomLevel: 18
    plugin: hereMaps
    center: QtPositioning.coordinate(19.997454, 73.789803)

    MapItemView {
        id: markerItem
        model: [
            { id: "marker1", color: "red" },
            { id: "marker2", color: "red" },
            { id: "marker3", color: "red" }
        ]
        delegate: mapMarkerComponent
    }

    Component {
        id : mapMarkerComponent

        MapQuickItem {
            id: mapMarker
            coordinate: QtPositioning.coordinate(19.997454, 73.789803)

            sourceItem: Rectangle {

                id: handle
                color: modelData.color
                width: 40
                height: 40

                MouseArea {
                    drag.target: parent
                    anchors.fill: parent
                    onClicked: {

                        handle.color = "green"

                    }
                }
            }

            onCoordinateChanged: {
                console.log(modelData.id + ":" + coordinate);
            }
        }
    }
   }

Answer 1

最明显的方法是遍历所有标记并重置这些标记的颜色，然后更改单击标记的颜色。为此，将 onClicked 更改为：

// switch to red if its green
if (handle.color == "#008000") {
    handle.color = "#ff0000";
    return;
}
// switch all markers to red
for(var marker in markerItem.children) {
    markerItem.children[marker].sourceItem.color = "#ff0000";
}
// switch clicked marker to green
handle.color = "#008000";

但是，如果您想 "select" 标记，这不是最佳解决方案（操纵颜色）。阅读 QML 中的状态 (link)，并尝试为您的标记实现某种 "normal" 和 "selected" 状态。

如何在qt qml中更改地图上委托组件的颜色

How to change colour of delegate component on map in qt qml

maps

qt

qml

qqmlcomponent