如何用qml在ListView中使用经纬度在地图中添加标记

Question

我试图使用列表视图中指定的坐标(纬度和经度)向地图添加标记。通过遵循qt教程，我可以设法为坐标列表编写代码，并绘制可视化的地图。但是，我仍然不清楚如何将列表连接到地图上，以便在地图中标记列表项。

我的main.qml是这样的。

import QtQuick 2.10
import QtQuick.Controls 2.3
import QtLocation 5.6
import QtPositioning 5.6
ApplicationWindow {

ListModel {
    id: locationModel
    ListElement {
        lat: 0; lon: 0
    }
    ListElement {
        lat: 10; lon: 25
    }
}

ListView {
    id: listView
    clip: true

    model: locationModel
    delegate: listDelegate
    headerPositioning: ListView.OverlayHeader
    z: 2
    header: headerComponent
    focus: true
}

Rectangle {
x: 326
y: 400
width: 300
height: 300
visible: true

Plugin {
    id: mapPlugin
    name: "esri" // "mapboxgl", "esri", ...
    // specify plugin parameters if necessary
    // PluginParameter {
    //     name:
    //     value:
    // }
}

Map {
    id: place
    anchors.fill: parent
    plugin: mapPlugin
    center: QtPositioning.coordinate(0, 0)
    zoomLevel: 10
}
}
}

Answer 1

只需使用MapItemView

import QtQuick 2.10
import QtQuick.Controls 2.3
import QtLocation 5.6
import QtPositioning 5.6

ApplicationWindow {
    visible: true
    width: 500
    height: 500

    ListModel {
        id: locationModel
        ListElement {lat: 0; lon: 0; color: "blue"}
        ListElement {lat: 5; lon: 12.5; color: "green"}
        ListElement {lat: 10; lon: 25; color: "red"}
    }

    Plugin {
        id: mapPlugin
        name: "esri"
    }

    Map {
        id: place
        anchors.fill: parent
        plugin: mapPlugin
        center: QtPositioning.coordinate(0, 0)
        zoomLevel: 5
        MapItemView
        {
            model: locationModel
            delegate: MapQuickItem {
                coordinate: QtPositioning.coordinate(lat, lon)
                anchorPoint: Qt.point(10,10)
                sourceItem: Rectangle {
                    width: 20
                    height: 20
                    radius: 10
                    color: model.color
                }
            }
        }
    }
}