QML在地图上创建MapQuickItem

我的目的是在地图上显示平面到坐标的距离。即使我很难显示自定义矩形组件，我也很难显示MapQuickItem。我不知道问题出在哪里？

编辑：我认为Box.qml没有问题。请忽略我没有传递给组件的属性值。

Box.qml

import QtQuick 2.0
import QtPositioning 5.12
import QtLocation 5.12



MapQuickItem{
    property var lat: 0
    property var lon: 0
    property var distance: 0

    id:distanceBoxId
    anchorPoint.x:mainRect.width/2
    anchorPoint.y:mainRect.height/2
    sourceItem: Rectangle{
        id:mainRect
        color: "red"
        height: 100
        width: 100
    }
    coordinate: QtPositioning.coordinate(lat,lon)
}

distanceBoxCreation.js

var component;
var sprite;

function createSpriteObjects(distance_moc,lat,lon) {
    component = Qt.createComponent("Box.qml");
    if (component.status == Component.Ready){
        finishCreation(distance_moc,lat,lon);
        console.log("item ready")
    }
    else
        component.statusChanged.connect(finishCreation);
}

function finishCreation(distance_moc,latitude,longitude) {
    if (component.status == Component.Ready) {
        console.log("tester" + latitude + " "+ longitude);

        sprite = component.createObject(map, {distance: distance_moc,lat:latitude,lon:longitude});
        if (sprite == null) {
            // Error Handling
            console.log("Error creating object");
        }
    } else if (component.status == Component.Error) {
        // Error Handling
        console.log("Error loading component:", component.errorString());
    }
}

main.qml

import QtQuick.Window 2.2
import QtLocation 5.9
import QtPositioning 5.8
import QtQuick.Controls 2.12
import QtQuick.Controls.Styles 1.4
import QtQuick 2.10
import "distanceBoxCreation.js" as MyScript



ApplicationWindow {
    id:mainAppId
    visible: true
    width: 640
    height: 480


    property var uav_latitude:0
    property var uav_longitude:10
    property var distance



    function addWaypointIndicator(latitude,longitude){
        waypointModelId.append({lat : latitude, lon:longitude})
        mapPolylineId.addCoordinate(QtPositioning.coordinate(latitude,longitude))
    }

    function focusOnUav(){
        map.center=QtPositioning.coordinate(uav_latitude,uav_longitude)
    }


    function focusOnLocation(index){
        map.center=QtPositioning.coordinate(waypointModelId.get(index).lat,waypointModelId.get(index).lon)
    }

    function getDistanceToCoordinate(target_coordinate){
        return mainUavId.coordinate.distanceTo(target_coordinate)
    }

    function clearWaypoints(waypointlist){
        waypointlist.clear()
        mapPolylineId.path=[]
    }

    function packageWaypoints(waypointlist){
        console.log("waypoint list is:",waypointlist)
    }

    ListModel {
        id: waypointModelId
    }



    Map {
        id: map
        anchors.fill: parent
        plugin: Plugin {name: "osm"}
        center: QtPositioning.coordinate(20.5, -2.5)
        zoomLevel: 13


        MapQuickItem{
            id:mainUavId
            anchorPoint.x:mainUavImageId.width/2
            anchorPoint.y:mainUavImageId.height/2
            sourceItem: Image {
                id: mainUavImageId
                source: "qrc:/uav.png"
                height: 50
                width: 50
            }
            coordinate: QtPositioning.coordinate(uav_latitude,uav_longitude)
        }


        MapPolyline {
            id:mapPolylineId
            line.width: 7
            line.color: 'orange'
            path: [ ]
        }

        Repeater{
            model: waypointModelId
            MapItemGroup {
                id: delegateGroup
                MapCircle{
                    id:mapCircleId
                    center:QtPositioning.coordinate(model.lat, model.lon)
                    radius: 750.0
                    color: 'red'
                    border.width: 3
                    opacity: 0.7
                }
                MapRectangle {
                    id: innerRect
                    border.color: "red"
                    border.width: 6
                    topLeft     : QtPositioning.coordinate(model.lat+0.002, model.lon-0.002)
                    bottomRight : QtPositioning.coordinate(model.lat-0.002, model.lon+0.002)
                }

                Component.onCompleted: {
//                    MyScript.createSpriteObjects(distance,uav_latitude,uav_longitude);
                    map.addMapItemGroup(this)
                }
            }
        }
        MouseArea{
            property var target_coord:map.toCoordinate(Qt.point(mouseX, mouseY))
            property var target_coord_lat
            property var target_coord_lon
            anchors.fill: parent
            onDoubleClicked: {
                target_coord=map.toCoordinate(Qt.point(mouse.x,mouse.y))
                target_coord_lat=target_coord.latitude
                target_coord_lon=target_coord.longitude
                addWaypointIndicator(target_coord_lat,target_coord_lon)
                distance=getDistanceToCoordinate(target_coord)
                MyScript.createSpriteObjects(distance,target_coord_lat,target_coord_lon);
            }
        }
        Button{
            x:100
            y:100
            text:"focus on uav"
            onClicked: {
                focusOnUav()
            }
        }
        Button{
            x:100
            y:150
            text:"focus on waypoint"
            onClicked: {
                focusOnLocation(waypointTextId.text)
            }
        }
        Button{
            x:100
            y:200
            text:"clear waypoints"
            onClicked: {
                clearWaypoints(waypointModelId)
            }
        }
        TextField {
            id:waypointTextId
            color: "white"
            background: Rectangle { color: "black" }
        }
    }
}