PayloadAPP/map/places_map.qml

// Copyright (C) 2017 The Qt Company Ltd.
// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause

//! [Imports]
import QtQuick
import QtPositioning
import QtLocation

//! [Imports]
MapView {
    anchors.fill: parent
    id: mapview
    //! [Initialize Plugin]
    map.plugin: Plugin {
        id: myPlugin
        name: "osm"
        //specify plugin parameters if necessary
        PluginParameter {
             name: "osm.mapping.providersrepository.disabled"
             value: "true"
         }

         PluginParameter {
             name: "osm.mapping.providersrepository.address"
             value: "http://maps-redirect.qt.io/osm/5.6/"
         }

        //PluginParameter {...}
        //...
    }
    map.activeMapType: map.supportedMapTypes[map.supportedMapTypes.length - 2]
    map.center: QtPositioning.coordinate(30.67, 120.07)
    map.zoomLevel: 10
    // map.activeMapType: MapType.HybridMap
    // map.onSupportedMapTypesChanged: {
    //     map.activeMapType = map.supportedMapTypes[map.supportedMapTypes.length - 1]
    // }
    // Component.onCompleted: {console.log(map.supportedMapTypes)}

    // 搜救信息位置显示，与页面列表信息同步
    signal locationClicked(string imsi)

    MapItemView {
        id: itemview
        parent: mapview.map
        // model: testModel
        model: imsiDataModel
        z:2
        delegate: MapQuickItem {
            id: location
            // property bool isSelected: false // 标记是否选中
            property string imsi: model.imsi
            property double latitude: model.latitude
            property double longitude: model.longitude
            coordinate: QtPositioning.coordinate(latitude, longitude)
            //图像底部中心对齐坐标点
            anchorPoint.x: item.width * 0.5
            anchorPoint.y: item.height

            sourceItem: Item {
                id: item
                width: image.width
                height: image.height
                Image {
                    id: image
                    source: "marker"
                    property double imageWidth: 20
                    property double imageHeight: 25
                    width: itemMouse.containsMouse ? imageWidth*1.25 : imageWidth
                    height: itemMouse.containsMouse ? imageHeight*1.25: imageHeight
                    Text {
                        anchors.centerIn: parent
                        text: model.row
                        font.pixelSize: image.width*0.5
                        color: "black"
                        horizontalAlignment: Text.AlignRight // 设置水平对齐方式为右对齐
                        verticalAlignment: Text.AlignBottom // 设置垂直对齐方式为底部对齐
                    }
                }

                MouseArea {
                    id: itemMouse
                    anchors.fill: parent
                    hoverEnabled: true
                    propagateComposedEvents: true
                    cursorShape: Qt.PointingHandCursor
                    onClicked: {
                        locationClicked(imsi)
                        // console.log(model.row, isSelected, imsiSelectionModel.isItemSelected(model.row))
                    }
                }
            }
        }
    }

    // 右下角经纬度显示
    HoverHandler {
        // 最外层的鼠标事件不要用MouseArea，不然hover事件和内层冲突
        id: mapHoverHandler
        acceptedDevices: PointerDevice.Mouse
        onPointChanged: {
            var position = mapview.map.toCoordinate(point.position)
            coordinatesDisplay.latitude = position.latitude
            coordinatesDisplay.longitude = position.longitude
        }
    }

    Rectangle {
        id: coordinatesDisplay
        width: 270
        height: 20
        anchors.right: parent.right
        anchors.bottom: parent.bottom
        color: "transparent" // 设置背景颜色为透明
        property double latitude
        property double longitude
        Text {
            anchors.centerIn: parent
            text: "Latitude: " + parent.latitude.toFixed(
                      7) + "  Longitude: " + parent.longitude.toFixed(7)
            color: "black"
            horizontalAlignment: Text.AlignRight // 设置水平对齐方式为右对齐
            verticalAlignment: Text.AlignBottom // 设置垂直对齐方式为底部对齐
        }
    }

}