QML 地图可拖拽位置标签组件

在地图上显示位置信息时，有时候需要同时显示该位置的详细信息。该组件可在地图上显示一个连接到地图地理位置的标签框，该标签框可点击进行拖拽。在地理位置改变、地图缩放、地图平移时，该标签框的相对位置保持不变。（注意：该组件父类必须为Map）如图：

 

属性：

name：组件名，用于查找组件

anchorCoordinate：标签点指向的经纬度

backgroundColor：背景颜色

borderColor：边框颜色

lineColor：连接线颜色

方法：

update():绘制标签

pointsChanged(coordinate)：更新标签位置

当需要显示标签时，设置完anchorCoordinate后调用update()函数绘制标签： 

Map {
        id:myMap
        anchors.fill: parent
        plugin: mapPlugin
        center: QtPositioning.coordinate(25.0018,102.9409) 
        zoomLevel: 6
        color: "#00000000"
        copyrightsVisible: false
        activeMapType:supportedMapTypes[1]

        MapPointLabel{
            id:mapPointLabel
            anchors.fill: parent
            name:"test"
            backgroundColor: "#cc115777"
            lineColor:"magenta"
            anchorCoordinate: QtPositioning.coordinate(25.0018,102.9409)
            Component.onCompleted: {
                update()
            }
        }
    }

当需要动态更新标签位置时，调用函数pointsChanged(coordinate)传入最新的经纬度即可，不需要调用update()函数：

Timer{
        id:timer
        interval: 1800
        repeat: true
        running: true
        onTriggered: {
            if(pathIndex<9){
                mapPointLabel.pointsChanged(pathList[pathIndex])//传入经纬度
                pathIndex++
            }else{
                pathIndex = 0
            }
        }
    }

Demo示例GitHub地址：

https://github.com/zjgo007/QmlDemo/tree/master/MapLabelhttps://github.com/zjgo007/QmlDemo/tree/master/MapLabelDemo示例CSDN下载地址：

https://download.csdn.net/download/zjgo007/82888234https://download.csdn.net/download/zjgo007/82888234

组件完整代码  MapPointLabel.qml：

import QtQuick 2.9
import QtPositioning 5.9
import QtLocation 5.9


Item{
    id:mainItem
    anchors.fill: parent
    property string name: ""
    property var anchorCoordinate: QtPositioning.coordinate(0,0)
    property color backgroundColor: "#b3115777"
    property color borderColor: "#e6115777"
    property color lineColor: "floralwhite"

    QtObject{
        id:object
        property point anchorPoint: "0,0"
    }

    Rectangle {
        id:mapPointLabel
        width: 60
        height: 100
        border.color: mainItem.borderColor
        color: mainItem.backgroundColor

        property int offsetX: -mapPointLabel.width/2
        property int offsetY: -mapPointLabel.height/2
        readonly property point center: Qt.point(x+mapPointLabel.width/2,y+mapPointLabel.height/2)
        property bool draged: false


        onXChanged: {
            if(!mapPointLabel.draged)
                return
            offsetX = x-object.anchorPoint.x
            myCanvas.requestPaint()
        }

        onYChanged: {
            if(!mapPointLabel.draged)
                return
            offsetY = y-object.anchorPoint.y
            myCanvas.requestPaint()
        }

        MouseArea{
            anchors.fill: parent
            drag.target: mapPointLabel
            drag.axis: Drag.XAndYAxis
            preventStealing: true
            onPressed: {
                mapPointLabel.draged = true
                mapPointLabel.border.color = "crimson"
            }
            onReleased: {
                mapPointLabel.draged = false
                mapPointLabel.border.color = mainItem.borderColor
            }
        }

    }


    Canvas{
        id:myCanvas
        anchors.fill: parent
        z:-1
        onPaint: {
            var ctx = getContext("2d")
            ctx.clearRect(0,0,myCanvas.width,myCanvas.height)
            ctx.strokeStyle = mainItem.lineColor
            ctx.lineWidth = 2;
            ctx.setLineDash([5,3])
            ctx.beginPath()
            ctx.moveTo(mapPointLabel.center.x,mapPointLabel.center.y)
            ctx.lineTo(object.anchorPoint.x,object.anchorPoint.y)
            ctx.stroke()
            ctx.clearRect(mapPointLabel.x,mapPointLabel.y,mapPointLabel.width,mapPointLabel.height)
        }
    }

    Connections{
        target: mainItem.parent
        function onZoomLevelChanged(){
            update()
        }
        function onVisibleRegionChanged(){
            update()
        }
    }

    function update(){
        object.anchorPoint = parent.fromCoordinate(anchorCoordinate,false)
        mapPointLabel.x = object.anchorPoint.x + mapPointLabel.offsetX
        mapPointLabel.y = object.anchorPoint.y + mapPointLabel.offsetY
        myCanvas.requestPaint()
    }

    function pointsChanged(coordinate){
        anchorCoordinate = coordinate
        update()
    }
}