如何使用QML及OSM插件从模型绘制点位图标与路径？

核心问题在于MapItemView仅支持单个代理，不用纠结在一个代理里塞两个元素，拆分绘制逻辑就行：用一个MapItemView专门渲染所有点位的图标，再单独加个MapPolyline来串联所有点位的坐标形成路径。

完整实现示例 #

XmlListModel {
    id: mapModel
    // 替换成你的数据源，确保包含latitude和longitude字段
    source: "your_points_data.xml"
    query: "/points/point"
    XmlRole { name: "latitude"; query: "latitude/number()" }
    XmlRole { name: "longitude"; query: "longitude/number()" }
}

Plugin {
    id: mapPlugin
    name: "osm"
}

Map {
    id: map
    anchors.fill: parent
    plugin: mapPlugin

    // 渲染所有点位图标
    MapItemView {
        model: mapModel
        delegate: MapQuickItem {
            coordinate: QtPositioning.coordinate(model.latitude, model.longitude)
            // 自定义点位图标，替换成你的图标路径
            sourceItem: Image {
                width: 30
                height: 30
                source: "marker_icon.png"
            }
            // 让图标中心点对准坐标点
            anchorPoint.x: sourceItem.width / 2
            anchorPoint.y: sourceItem.height
        }
    }

    // 绘制点位间的路径
    MapPolyline {
        line.color: "red"
        line.width: 5
        // 动态遍历模型生成路径坐标数组
        path: {
            var coords = []
            for (var i = 0; i < mapModel.count; i++) {
                coords.push(QtPositioning.coordinate(
                    mapModel.get(i).latitude,
                    mapModel.get(i).longitude
                ))
            }
            return coords
        }
    }
}

特殊场景：模型每个条目包含一段路径 #

如果你的模型里每个条目本身对应一段路径（比如包含起点、终点和中间坐标），可以在代理容器里同时放点位图标和路径元素：

MapItemView {
    model: mapModel
    delegate: Item {
        // 路径起点图标
        MapQuickItem {
            coordinate: QtPositioning.coordinate(model.startLat, model.startLng)
            sourceItem: Image { width: 20; height: 20; source: "start_marker.png" }
            anchorPoint.x: sourceItem.width/2
            anchorPoint.y: sourceItem.height
        }
        // 路径终点图标
        MapQuickItem {
            coordinate: QtPositioning.coordinate(model.endLat, model.endLng)
            sourceItem: Image { width: 20; height: 20; source: "end_marker.png" }
            anchorPoint.x: sourceItem.width/2
            anchorPoint.y: sourceItem.height
        }
        // 当前条目的路径
        MapPolyline {
            line.color: "blue"
            line.width: 3
            path: model.pathRole // 假设pathRole是模型中存储路径坐标的字段
        }
    }
}

内容的提问来源于stack exchange，提问作者Vladimir Bershov