在 SwiftUI 中关闭地图视图 (MKMapView)

Dismiss a map view (MKMapView) in SwiftUI

iOS 小应用中使用 SwiftUI。 有一张地图和一个用于关闭地图的按钮。

我首先阅读了本教程:Advanced MKMapView with SwiftUI 以了解如何处理 SwiftUI 中的 MKMapView,它正在运行。这是 MapView 的代码: (代码几乎完全基于上述教程)

import SwiftUI
import MapKit

struct MapView: UIViewRepresentable {
    @Binding var centerCoordinate: CLLocationCoordinate2D
    @Environment(\.presentationMode) var presentationMode

    func makeUIView(context: Context) -> MKMapView {
        let mapView = MKMapView()
        mapView.delegate = context.coordinator
        appLocalizeMap(mapView)
        return mapView
    }

    func updateUIView(_ view: MKMapView, context: Context) {

    }

    func makeCoordinator() -> Coordinator {
        Coordinator(self)
    }

    class Coordinator: NSObject, MKMapViewDelegate {
        var parent: MapView

        init(_ parent: MapView) {
            self.parent = parent
        }
    }

    // User added code.
    func appLocalizeMap(_ mapView: MKMapView) {
        let locatSide = 1000.0
        mapView.isRotateEnabled = false
        mapView.region = MKCoordinateRegion(center: centerCoordinate,
                                            latitudinalMeters: locatSide,   longitudinalMeters: locatSide)
    }

    func dismiss() { // Not currently working ...
        self.presentationMode.wrappedValue.dismiss()
    }
}

然后我需要设置关闭地图的按钮。这就是我遇到麻烦的地方。

下面是代码,我在其中显示地图并在其上设置了一个按钮。 它看起来不错,但只是看起来。什么都不起作用。在网上搜索并阅读更多内容后,我觉得我没有将按钮设置在我应该设置的位置。另外我不知道在哪里(大概在 MapView 的代码中)我应该有使地图消失的代码。

ZStack {
    MapView(centerCoordinate:
        Binding(get: {CLLocationCoordinate2D(
                            latitude: self.refSpot.userLatitude,
                            longitude: self.refSpot.userLongitude)},
                set: {newValue in}))
        .edgesIgnoringSafeArea(.all)
    
    Button(action: {
        print("Dismiss Map")
    }) {
        VStack {
            HStack {
                Image(uiImage: UIImage(named: "Back.png")!)
                    .font(.title)
                    .foregroundColor(.gray)
                Spacer()
            }
            Spacer()
        }
    }
}

我在其他文档中发现的关于删除 View 的内容似乎不适用于此处的 MapView。 任何相关提示将不胜感激。

如果需要的话,让事情更清楚。这是启动时的应用程序:

打开地图按钮按预期工作。点击它会带来这个:

问题出在最后一张图片左上角的十字形按钮上。此按钮应使地图及其本身消失,返回到第一张图片。

使用此代码(修改):

Button(action: {self.showingMap.toggle()}) {
    Text("Open a map")
        .font(.largeTitle)
        .foregroundColor(.gray)
        .padding()
    .overlay(
        RoundedRectangle(cornerRadius: 30)
            .stroke(Color.gray, lineWidth: 4))
}.sheet(isPresented: $showingMap) {
    ZStack {
        if self.showMap {
            MapView(centerCoordinate:
                Binding(get: {CLLocationCoordinate2D(
                                latitude: self.refSpot.userLatitude,
                                longitude: self.refSpot.userLongitude)},
                        set: {newValue in}))
                .edgesIgnoringSafeArea(.all)
        }
        
        Button(action: {
            self.showMap.toggle()
        }) {
            VStack {
                HStack {
                    Image(uiImage: UIImage(named: "Back.png")!)
                        .font(.title)
                        .foregroundColor(.gray)
                    Spacer()
                }
                Spacer()
            }
        }
    }
}

现在点击十字按钮会出现以下视图:

虽然地图本身不见了,但十字按钮还在,而且顶部的图像不会回来。

我猜你是这个意思...

struct DemoView: View {
    @State private var showMap = true

    var body: some View {
        ZStack {
            if showMap {
                MapView(centerCoordinate:
                            Binding(get: {CLLocationCoordinate2D(
                                        latitude: self.refSpot.userLatitude,
                                        longitude: self.refSpot.userLongitude)},
                                    set: {newValue in}))
                    .edgesIgnoringSafeArea(.all)
            }

            Button(action: {
                self.showMap.toggle()
            }) {
                VStack {
                    HStack {
                        Image(uiImage: UIImage(named: "Back.png")!)
                            .font(.title)
                            .foregroundColor(.gray)
                        Spacer()
                    }
                    Spacer()
                }
            }
        }
    }
}