在QT QML映射中显示标记

时间:2019-03-28 04:17:12

标签: qt qml

我正在尝试在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
    }

}

}

1 个答案:

答案 0 :(得分:0)

您必须使用ID来引用组件,例如,如果您拥有Map并运行Map.addMapItem(...)到将要添加该项的Map上。另一方面,您有一个坏习惯:您使用现有元素的名称(例如已经为类型的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