在QT QML Map中显示标记

Question

我正在尝试在QT QML地图中添加标记。这是我用来在Map中添加标记的代码，但标记没有显示。请帮帮忙！我是QT编程的初学者。很抱歉我的语法问题。谢谢!

 Plugin {
    id: mapPlugin
    name: "osm" 
}

function addMarker(latitude, longitude)
{
var Component = Qt.createComponent("qrc:///views/marker.qml")
var Item = Component.createObject(window, { coordinate:
QtPositioning.coordinate(latitude, longitude) })
Map.addMapItem(Item)
 }

     Map {
         anchors.fill: parent
         plugin: mapPlugin
         center: QtPositioning.coordinate(59.14, 14.15)
         zoomLevel: 14

         Component.onCompleted:
         {
         addMarker(59.14, 14.15)

         }
     }

Marker.qml

MapQuickItem
{
    id: marker
    anchorPoint.x: marker.width / 4
    anchorPoint.y: marker.height
    sourceItem: Image
{

  Image
    {
    id: icon
    source: "marker.png"
    sourceSize.width: 40
    sourceSize.height: 40
    }

}

}

Answer 1

您必须使用if来引用组件，例如，如果您有映射并运行Map.addMapItem(...)，项目将被添加到什么映射？另一方面，您有一个坏习惯:使用现有元素的名称，例如已经是类型的Item，在这种情况下，将其更改为item以避免混淆，考虑到上面的解决方案是：

import QtQuick 2.9
import QtQuick.Window 2.2
import QtLocation 5.12
import QtPositioning 5.12

Window {
    id: window
    visible: true
    width: 640
    height: 480
    title: qsTr("Hello World")
    Plugin {
        id: mapPlugin
        name: "osm"
    }
    function addMarker(latitude, longitude)
    {
        var Component = Qt.createComponent("qrc:///views/marker.qml")
        var item = Component.createObject(window, {
                                              coordinate: QtPositioning.coordinate(latitude, longitude)
                                          })
        map.addMapItem(item)
    }
    Map {
        id: map
        anchors.fill: parent
        plugin: mapPlugin
        center: QtPositioning.coordinate(59.14, 14.15)
        zoomLevel: 14
        Component.onCompleted:addMarker(59.14, 14.15)
    }
}

另一方面，在标记中，你指出一个图像作为孩子有另一个图像，你认为它是正确的吗？，这是不必要的，所以更正的标记代码是：

import QtQuick 2.0
import QtLocation 5.12

MapQuickItem{
    id: marker
    anchorPoint.x: marker.width / 4
    anchorPoint.y: marker.height
    sourceItem: Image{
        id: icon
        source: "marker.png"
        sourceSize.width: 40
        sourceSize.height: 40
    }
}

下面的link提供了完整的示例