如何使用qml

时间:2018-04-15 16:12:24

标签: qt qml

我正在尝试使用listview中指定的坐标(纬度和经度)将标记添加到地图中。我可以设法编写坐标列表的代码,并按照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
}
}
}

1 个答案:

答案 0 :(得分: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
                }
            }
        }
    }
}