如何自动缩放Qml地图以适合两个MapQuickItems

Question

我有Qt Qml应用程序，其中我需要显示两个MapQuickItems地图。一个是出租车，另一个是顾客。我想把它们都显示在地图里。我想让地图在出租车接近客户时自动放大或缩小。没有涉及到路由或手势。用户不应该能够与地图交互。

我试着摆弄一下map.center属性。但是当出租车很远的时候，它不能很好地工作。

import QtQuick 2.12
import QtQuick.Window 2.12
import QtPositioning 5.12
import QtLocation 5.5

Rectangle
{
    id: mapWindow
    visible: false
    property real taxiLatitude: 0
    property real taxiLongitude: 0
    property real customerLatitude: 0
    property real customerLongitude: 0

    Plugin
    {
        id: googleMap
        name: "googlemaps"
    }

    Map
    {
        id: map
        anchors.fill: mapWindow
        plugin: googleMap
        center: QtPositioning.coordinate(taxiLatitude, taxiLongitude) //positionSource.position.coordinate
        zoomLevel: 17
        copyrightsVisible: true

        MapQuickItem
        {
            id: markerTaxi
            anchorPoint.x: imageHuman.width/4
            anchorPoint.y: imageHuman.height
            coordinate: QtPositioning.coordinate(customerLatitude, taxiLongitude)
            sourceItem: Image
            {
                id: imageHuman
                width: 40
                height: 40
                source: "qrc:/Images/extrapics/humanIcon.png"
            }
        }

        MapQuickItem
        {
            id: markerCustomer
            anchorPoint.x: image.width/4
            anchorPoint.y: image.height
            coordinate: QtPositioning.coordinate(taxiLatitude, taxiLongitude)
            sourceItem: Image
            {
                id: image
                width: 40
                height: 40
                source: "qrc:/Images/extrapics/point.png"
            }
        }
    }
}

我需要适合出租车和客户在地图和地图应该自动放大，因为出租车接近客户。

我试着像下面这样设置可见区域。但这是有帮助的。它显示了一个不同的区域(北美)。但我设置的区域是完全不同的大陆。

visibleRegion: QtPositioning.rectangle(QtPositioning.coordinate(12.921527, 75.092244), QtPositioning.coordinate(12.726949, 75.014545))

Answer 1

使用计时器通过fitViewportToMapItems()更新地图

import QtQuick 2.12
import QtQuick.Window 2.12
import QtPositioning 5.12
import QtLocation 5.5

Rectangle
{
    id: mapWindow
    visible: false
    property real taxiLatitude: 0
    property real taxiLongitude: 0
    property real customerLatitude: 0
    property real customerLongitude: 0

    Plugin
    {
        id: googleMap
        name: "googlemaps"
    }

    Timer
    {
        id: mapRefreshtimer
        running: true
        interval: 2000
        repeat: true
        onTriggered:
        {
            map.fitViewportToMapItems()
        }
    }

    Map
    {
        id: map
        anchors.fill: mapWindow
        plugin: googleMap

        MapQuickItem
        {
            id: markerTaxi
            anchorPoint.x: imageHuman.width/4
            anchorPoint.y: imageHuman.height
            coordinate: QtPositioning.coordinate(customerLatitude, taxiLongitude)
            visible: true
            sourceItem: Image
            {
                id: imageHuman
                width: 40
                height: 40
                source: "qrc:/Images/extrapics/humanIcon.png"
            }
        }

        MapQuickItem
        {
            id: markerCustomer
            anchorPoint.x: image.width/4
            anchorPoint.y: image.height
            coordinate: QtPositioning.coordinate(taxiLatitude, taxiLongitude)
            visible: true
            sourceItem: Image
            {
                id: image
                width: 40
                height: 40
                source: "qrc:/Images/extrapics/point.png"
            }
        }

    }
}