如何通过输入坐标在 QML 地图上添加一个点？

Question

我想通过输入坐标在我的地图上添加一个点。它工作正常，但我无法将我的输入转换为实际的地图坐标。它获取屏幕的值并将其转换为坐标。

例如，如果我输入 (0,0)，它会将点放在 (0,0) 屏幕位置，即坐标 (78.46671909721232, -74.02100401110448)。我用 console.log 输出检查这个。我如何要求它在 (0,0) 经度/纬度上放置一个点？

我已添加以下代码以供参考。

TextField {
           id: xcoordtext
           anchors.verticalCenter: parent.verticalCenter
           validator: DoubleValidator {bottom: -90.00; top: 90.00;}
           Layout.fillWidth:   true
        }
TextField {
           id: ycoordtext
           anchors.verticalCenter: parent.verticalCenter
           validator: DoubleValidator {bottom: -90.00; top: 90.00;}
           Layout.fillWidth:   true
        }
Button {
         text:               "POINT Confirmed"
         Layout.fillWidth:   true

         onClicked: {
              var waypointCoord = myMap.toCoordinate(Qt.point(xcoordtext.text,ycoordtext.text), false)
              console.log(waypointCoord.longitude, waypointCoord.latitude)
           }
        }

控制台日志中出现的错误和消息如下：-

"Passing incompatible arguments to C++ functions from JavaScript is dangerous and deprecated."
"This will throw a JavaScript TypeError in future releases of Qt!"
qml: -106.9871520804946 79.58494957851264
Ignored NaN, Inf, or -Inf value.
Attempting to set invalid range for value axis: [ nan  -  nan ]
TerrainQueryLog: Error in fetching elevation tile. Empty response.
Ignored NaN, Inf, or -Inf value.
Attempting to set invalid range for value axis: [ nan  -  nan ]

qml: -106.9871520804946 79.58494957851264 是我在 TextField 输入中输入 0 (xcoordtext.text) 和 0(ycoord.text) 时得到的坐标。

Answer 1

我为你写了这个例子，正如我从你的问题中理解的那样。 如果您希望该用户在 TextInput 中添加 lat 和 long，然后在此坐标上添加一个点，则不应转换任何内容。

我使用 TextInput 而不是 TextField 来获取用户输入。

在本例中，用户添加从 -90 到 90 的 x 和 y 数字，并在地图中用红色圆圈添加该点。

在屏幕的右下角，我放了一个白色矩形，显示鼠标在 lat 和 long 中的位置，我将屏幕 x 和 y 转换为 lat 和 long。

您可以看到差异，并且您还可以看到指向红色圆圈的鼠标准确地显示了用户从文本输入中添加的点。

import QtQuick 2.0
import QtLocation 5.9
import QtPositioning 5.8
import QtQuick.Controls 2.12

Item {

Plugin
{
    id: mapPlugin
    name: "osm"
}
Map
{
    id: map
    anchors.rightMargin: 0
    anchors.bottomMargin: 0
    anchors.leftMargin: 0
    anchors.topMargin: 0
    anchors.fill: parent
    plugin: mapPlugin
    center: QtPositioning.coordinate(29.7264175,55.99735)
    zoomLevel: 5
    copyrightsVisible: false
    focus: true

    MouseArea
    {
        anchors.fill: map
        hoverEnabled: true
        onPositionChanged:  {

            lat.text ="Lat :"+ map.toCoordinate(Qt.point(mouseX,mouseY)).latitude.toString()
            lon.text ="Lon :"+ map.toCoordinate(Qt.point(mouseX,mouseY)).longitude.toString()

        }

    }

    property Component itemDelegate: Component{
        Rectangle {
            width: 14
            height: 14
            radius: 7
            color: "red"
        }
    }



    MapItemView{
        id: item_view
        model: ListModel{
            id: item_model
        }
        delegate: MapQuickItem{
            id: ietm_delegate
            zoomLevel: 0
            sourceItem: Loader{
                sourceComponent: map.itemDelegate
            }
            coordinate{
                latitude: latitudeval
                longitude: longitudeval
            }
            anchorPoint: Qt.point(sourceItem.width/2, sourceItem.height/2)
        }
    }

    Rectangle
    {
        width: 251
        height: 163
        color: "#ffffff"
        border.color: "#000000"
        border.width: 1

        TextInput {
            id: textInput_x
            x: 68
            y: 25
            width: 175
            height: 30
            font.pixelSize: 16
            validator: DoubleValidator {bottom: -90.00; top: 90.00;}
            focus: true

        }

        TextInput {
            id: textInput_y
            x: 68
            y: 60
            width: 175
            height: 24
            font.pixelSize: 16
            focus: true

            validator: DoubleValidator {bottom: -90.00; top: 90.00;}
        }

        Label {
            id: label
            x: 20
            y: 25
            width: 53
            height: 30
            text: qsTr("x :")
            horizontalAlignment: Text.AlignHCenter
        }

        Label {
            id: label1
            x: 20
            y: 60
            width: 53
            height: 30
            text: qsTr("Y :")
            horizontalAlignment: Text.AlignHCenter
        }

        Button {
            x: 8
            y: 113
            text:               "POINT Confirmed"
            Layout.fillWidth:   true

            onClicked: {
                var waypointCoord = map.toCoordinate(Qt.point(textInput_x.text,textInput_y.text))

                item_model.append({"latitudeval":textInput_y.text,"longitudeval":textInput_x.text});

                console.log(waypointCoord.longitude, waypointCoord.latitude)
            }
        }
    }






    Rectangle {
        width: 206
        height: 50
        color: "white"
        anchors.top: parent.bottom
        anchors.topMargin: -50
        anchors.left: parent.right
        anchors.leftMargin: -206

        Text {
            id: lat
            width: 206
            height: 24

        }

        Text {
            id: lon
            x: 0
            y: 24
            width: 206
            height: 26

        }


    }

}
}