Back to Qt.io
Contact Us Blog Download Qt
Auf dieser Seite

Minimal Map (QML)

Der minimale Code zum Anzeigen einer Karte mithilfe von ` Qt Quick`.

Anwendungsfenster mit einer Karte des Stadtzentrums von Oslo

„Minimal Map“ veranschaulicht, wie das Element „ Map “ zum Rendern einer Karte verwendet wird. Es zeigt den minimalen Codeumfang, der zur Darstellung der Karte erforderlich ist, und kann als Grundlage für weitere Experimente dienen.

Ausführen des Beispiels

Sie können das Beispiel wie folgt ausführen:

C++-Code

In „ main.cpp “ verwenden wir ausschließlich die Klassen „ QGuiApplication “ und „ QQmlApplicationEngine “.

#include <QGuiApplication>
#include <QQmlApplicationEngine>

In der Hauptfunktion instanziieren wir zunächst ein „ QGuiApplication “-Objekt. Anschließend erstellen wir ein „ QQmlApplicationEngine “-Objekt und weisen es an, „ main.qml “ aus dem Qt-Ressourcensystem zu laden.

Schließlich startet „ QGuiApplication::exec()“ die Haupt-Ereignisschleife.

int main(int argc, char *argv[])
{
    QGuiApplication app(argc, argv);

    QQmlApplicationEngine engine;
    engine.load(QUrl(QStringLiteral("qrc:/main.qml")));

    return app.exec();
}

QML-Code

In ` main.qml` importieren wir das QML-Modul ` QtLocation ` und das davon abhängige QML-Modul ` QtPositioning `. Als Nächstes erstellen wir das Fenster der obersten Ebene, legen eine sinnvolle Standardgröße fest und machen es sichtbar. Das Fenster wird durch ein ` Map `-Element gefüllt, das die Karte anzeigt.

import QtQuick
import QtLocation
import QtPositioning

Window {
    width: Qt.platform.os == "android" ? Screen.width : 512
    height: Qt.platform.os == "android" ? Screen.height : 512
    visible: true
    title: map.center + " zoom " + map.zoomLevel.toFixed(3)
           + " min " + map.minimumZoomLevel + " max " + map.maximumZoomLevel

    Plugin {
        id: mapPlugin
        name: "osm"
    }

    Map {
        id: map
        anchors.fill: parent
        plugin: mapPlugin
        center: QtPositioning.coordinate(59.91, 10.75) // Oslo
        zoomLevel: 14
        property geoCoordinate startCentroid

        PinchHandler {
            id: pinch
            target: null
            onActiveChanged: if (active) {
                map.startCentroid = map.toCoordinate(pinch.centroid.position, false)
            }
            onScaleChanged: (delta) => {
                map.zoomLevel += Math.log2(delta)
                map.alignCoordinateToPoint(map.startCentroid, pinch.centroid.position)
            }
            onRotationChanged: (delta) => {
                map.bearing -= delta
                map.alignCoordinateToPoint(map.startCentroid, pinch.centroid.position)
            }
            grabPermissions: PointerHandler.TakeOverForbidden
        }
        WheelHandler {
            id: wheel
            // workaround for QTBUG-87646 / QTBUG-112394 / QTBUG-112432:
            // Magic Mouse pretends to be a trackpad but doesn't work with PinchHandler
            // and we don't yet distinguish mice and trackpads on Wayland either
            acceptedDevices: Qt.platform.pluginName === "cocoa" || Qt.platform.pluginName === "wayland"
                             ? PointerDevice.Mouse | PointerDevice.TouchPad
                             : PointerDevice.Mouse
            rotationScale: 1/120
            property: "zoomLevel"
        }
        DragHandler {
            id: drag
            target: null
            onTranslationChanged: (delta) => map.pan(-delta.x, -delta.y)
        }
        Shortcut {
            enabled: map.zoomLevel < map.maximumZoomLevel
            sequence: StandardKey.ZoomIn
            onActivated: map.zoomLevel = Math.round(map.zoomLevel + 1)
        }
        Shortcut {
            enabled: map.zoomLevel > map.minimumZoomLevel
            sequence: StandardKey.ZoomOut
            onActivated: map.zoomLevel = Math.round(map.zoomLevel - 1)
        }
    }
}

Das Element „ Plugin “ ist erforderlich, um den Kartenanbieter zu definieren, den wir verwenden wollen. Das Beispiel funktioniert mit jedem der verfügbaren Geo-Services-Plugins. Einige Plugins benötigen jedoch möglicherweise zusätzliche Plugin-Parameter, um korrekt zu funktionieren, und wir können „ PluginParameter “ verwenden, um diese anzugeben. In diesem Beispiel verwenden wir das Plugin „ osm “, bei dem es sich um ein „Qt Location OpenStreetMap“-Plugin handelt, das keine Parameter benötigt.

Im Element „ Map “ verweisen wir auf die von uns verwendete URL plugin und legen die Breite („ center “) sowie die Höhe („ zoomLevel “) der Karte fest.

Voraussetzungen

Das Beispiel erfordert eine funktionierende Internetverbindung, um OpenStreetMap -Kartenkacheln herunterzuladen. Ein optionaler Systemproxy sollte automatisch erkannt werden.

Beispielprojekt @ code.qt.io

© 2026 The Qt Company Ltd. Documentation contributions included herein are the copyrights of their respective owners. The documentation provided herein is licensed under the terms of the GNU Free Documentation License version 1.3 as published by the Free Software Foundation. Qt and respective logos are trademarks of The Qt Company Ltd. in Finland and/or other countries worldwide. All other trademarks are property of their respective owners.