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

时间:2020-07-05 12:04:50

标签: ios swiftui mkmapview

在使用iOS的小型SwiftUI应用中。 有一个地图和一个用来关闭地图的按钮。

我首先阅读了本教程:Advanced MKMapView with SwiftUI,以了解如何处理MKMapView中的SwiftUI,并且它正在工作。这是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。 任何相关提示将不胜感激。

根据需要使情况更清晰。这是开始时的应用程序:

enter image description here

按钮打开地图可以正常工作。轻按它会带来以下效果:

enter image description here

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

使用此代码(已修改):

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()
            }
        }
    }
}

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

enter image description here

尽管地图本身不见了,但十字按钮仍然在那里,并且顶部图像没有回来。

1 个答案:

答案 0 :(得分:1)

我想你是这个意思...

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()
                }
            }
        }
    }
}