// 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 // 设置垂直对齐方式为底部对齐 } } }