如何在Qt的MainWindow.ui窗体中实现交互式OpenStreetMap及点位交互？

我来帮你搞定把交互式OpenStreetMap集成到Qt MainWindow里的需求，还会实现点位经纬度传递和信息添加功能，咱们一步步来：

一、核心思路：将QML地图嵌入Widget窗口 #

原来的示例用独立的QQuickView运行QML地图，现在要把它放到MainWindow.ui中，我们需要用QQuickWidget作为QML的承载容器，这是Qt Widgets项目集成QML的标准方式。

1. 调整项目配置与MainWindow代码 #

首先确保你的项目是Qt Widgets项目，然后在.pro文件中添加必要的模块：

QT += quick widgets location positioning

修改main.cpp（替换为Widget项目的入口）

#include <QApplication>
#include "MainWindow.h"

int main(int argc, char **argv) {
    QApplication app(argc, argv);
    MainWindow window;
    window.show();
    return app.exec();
}

MainWindow.h文件

#ifndef MAINWINDOW_H
#define MAINWINDOW_H

#include <QMainWindow>
#include <QQuickWidget>

QT_BEGIN_NAMESPACE
namespace Ui { class MainWindow; }
QT_END_NAMESPACE

class MainWindow : public QMainWindow
{
    Q_OBJECT

public:
    MainWindow(QWidget *parent = nullptr);
    ~MainWindow();

    // 可选：提供给QML调用的方法，用于从C++传递经纬度数据
    Q_INVOKABLE void addCustomMarker(double lat, double lon, const QString& title, const QString& desc);

private:
    Ui::MainWindow *ui;
};
#endif // MAINWINDOW_H

MainWindow.cpp文件

#include "MainWindow.h"
#include "ui_MainWindow.h"
#include <QUrl>
#include <QVariantMap>

MainWindow::MainWindow(QWidget *parent)
    : QMainWindow(parent)
    , ui(new Ui::MainWindow)
{
    ui->setupUi(this);
    // 设置QQuickWidget属性，启用透明背景（可选）
    ui->quickWidget->setClearColor(Qt::white);
    // 加载QML文件
    ui->quickWidget->setSource(QUrl(QStringLiteral("qrc:/places_map.qml")));
    // 把MainWindow实例暴露给QML，实现C++与QML的双向交互
    ui->quickWidget->rootContext()->setContextProperty("mainWindow", this);
}

MainWindow::~MainWindow()
{
    delete ui;
}

// 实现从C++向QML添加点位的方法
void MainWindow::addCustomMarker(double lat, double lon, const QString& title, const QString& desc)
{
    QVariantMap markerData;
    markerData["lat"] = lat;
    markerData["lon"] = lon;
    markerData["title"] = title;
    markerData["desc"] = desc;
    // 调用QML中的函数添加点位
    ui->quickWidget->rootObject()->setProperty("addCustomMarkerFromCpp", markerData);
}

在MainWindow.ui中添加QQuickWidget

打开Qt Designer，从控件栏拖一个QQuickWidget到主窗口，设置它的anchors填充满整个窗口（或者自定义大小），并将其对象名设为quickWidget。

2. 修改QML文件，实现交互式功能 #

更新places_map.qml，添加点击地图点位、自定义点位管理、信息弹窗等交互功能：

import QtQuick 2.0
import QtPositioning 5.5
import QtLocation 5.6
import QtQuick.Controls 2.12

Rectangle {
    anchors.fill: parent

    // 存储自定义点位的模型
    ListModel {
        id: customMarkersModel
        // 数据结构：coordinate（经纬度对象）、title（标题）、desc（描述）
    }

    // OSM地图插件
    Plugin {
        id: myPlugin
        name: "osm"
    }

    // 主地图组件
    Map {
        id: map
        anchors.fill: parent
        plugin: myPlugin
        center: QtPositioning.coordinate(59.93, 10.76) // 默认中心：奥斯陆
        zoomLevel: 13

        // 原有搜索结果标记（披萨店）
        MapItemView {
            model: searchModel
            delegate: MapQuickItem {
                coordinate: place.location.coordinate
                anchorPoint.x: image.width * 0.5
                anchorPoint.y: image.height
                sourceItem: Column {
                    Image { id: image; source: "qrc:/marker.png" }
                    Text { text: title; font.bold: true; color: "darkred" }
                }
            }
        }

        // 自定义点位标记
        MapItemView {
            model: customMarkersModel
            delegate: MapQuickItem {
                coordinate: model.coordinate
                anchorPoint.x: markerImg.width * 0.5
                anchorPoint.y: markerImg.height

                sourceItem: Column {
                    Image {
                        id: markerImg
                        source: "qrc:/custom_marker.png"
                        // 点击标记弹出信息窗口
                        MouseArea {
                            anchors.fill: parent
                            onClicked: {
                                infoDialog.title = model.title
                                infoDialog.desc = model.desc
                                infoDialog.open()
                            }
                        }
                    }
                    Text { text: model.title; font.bold: true; color: "darkblue" }
                }
            }
        }

        // 点击地图空白处添加自定义点位
        MouseArea {
            anchors.fill: parent
            onClicked: {
                // 屏幕坐标转地理经纬度
                var targetCoord = map.toCoordinate(Qt.point(mouseX, mouseY))
                addMarkerDialog.coordinate = targetCoord
                addMarkerDialog.open()
            }
        }
    }

    // 原有定位与搜索逻辑（保留）
    PositionSource {
        id: positionSource
        property variant lastSearchPosition: QtPositioning.coordinate(59.93, 10.76)
        active: true
        updateInterval: 120000 // 2分钟更新一次位置
        onPositionChanged: {
            var currentPosition = positionSource.position.coordinate
            map.center = currentPosition
            var distance = currentPosition.distanceTo(lastSearchPosition)
            if (distance > 500) { // 离开上次搜索位置500米以上，重新搜索
                lastSearchPosition = currentPosition
                searchModel.searchArea = QtPositioning.circle(currentPosition)
                searchModel.update()
            }
        }
    }

    PlaceSearchModel {
        id: searchModel
        plugin: myPlugin
        searchTerm: "Pizza"
        searchArea: QtPositioning.circle(QtPositioning.coordinate(59.93, 10.76))
        Component.onCompleted: update()
    }

    Connections {
        target: searchModel
        onStatusChanged: {
            if (searchModel.status == PlaceSearchModel.Error)
                console.log(searchModel.errorString());
        }
    }

    // 接收C++传递的点位数据的方法
    function addCustomMarkerFromCpp(data) {
        customMarkersModel.append({
            "coordinate": QtPositioning.coordinate(data.lat, data.lon),
            "title": data.title,
            "desc": data.desc
        })
    }

    // 添加点位的输入弹窗
    Dialog {
        id: addMarkerDialog
        title: "添加新点位"
        property variant coordinate: null

        Column {
            spacing: 12
            padding: 15

            Text { 
                text: "经纬度: " + coordinate.latitude.toFixed(6) + ", " + coordinate.longitude.toFixed(6)
                font.family: "Monospace"
            }

            TextField {
                id: markerTitleInput
                placeholderText: "请输入点位标题"
                width: parent.width
            }

            TextArea {
                id: markerDescInput
                placeholderText: "请输入点位描述"
                width: parent.width
                height: 100
            }

            Button {
                text: "确认添加"
                width: parent.width
                onClicked: {
                    if (markerTitleInput.text.trim() !== "") {
                        customMarkersModel.append({
                            "coordinate": addMarkerDialog.coordinate,
                            "title": markerTitleInput.text,
                            "desc": markerDescInput.text
                        })
                        addMarkerDialog.close()
                        markerTitleInput.text = ""
                        markerDescInput.text = ""
                    }
                }
            }
        }
    }

    // 点位信息查看弹窗
    Dialog {
        id: infoDialog
        title: "点位详情"
        property string title: ""
        property string desc: ""

        Column {
            spacing: 12
            padding: 15

            Text { 
                text: "标题: " + infoDialog.title
                font.bold: true
                font.pixelSize: 14
            }

            Text { 
                text: "描述: " + infoDialog.desc
                wrapMode: Text.WordWrap
            }

            Button {
                text: "关闭"
                width: parent.width
                onClicked: infoDialog.close()
            }
        }
    }
}

二、关键功能说明 #

1. 嵌入MainWindow：通过QQuickWidget将QML地图完美嵌入Widget窗口，同时通过rootContext()->setContextProperty实现C++与QML的双向通信。
2. 点击地图加点位：给Map添加全局MouseArea，点击时将屏幕坐标转换为地理经纬度，弹出输入框收集点位信息后，添加到自定义模型中渲染。
3. 点位交互：自定义标记支持点击弹窗查看详情，同时支持从C++主动传递经纬度数据到QML添加点位。
4. 保留原有功能：原有的定位跟踪、披萨店搜索逻辑完全保留，你可以根据需求修改搜索关键词或定位更新间隔。

三、注意事项 #

• 标记图片（marker.png、custom_marker.png）需要添加到QRC资源文件中，确保路径正确。
• 如果不需要C++与QML的交互，可以删除addCustomMarker相关代码，只保留QML内部的点位管理逻辑。
• 部分Qt版本的OSM插件可能需要配置代理（如果网络受限），可以在Plugin中添加PluginParameter { name: "osm.mapping.proxy.host"; value: "你的代理地址" }。

内容的提问来源于stack exchange，提问作者Ivan Triumphov