在 selectedSegment 中显示 mapType SwiftUi

Question

有谁能够帮我？ 使用此代码。 我需要更改 map 的类型，例如 selectedSegmented 中的混合或标准，但我不能。

struct MapView: View {

    @State private var selectedSegment = 0
    @State private var kind_of_Map = ["hybridFlyover", "standard"]

    var body: some View {

        VStack {
            Picker(selection: $selectedSegment, label: Text("")) {
                ForEach(0..<kind_of_Map.count) { index in
                    Text(self.kind_of_Map[index]).tag(index)
                }
            }.pickerStyle(SegmentedPickerStyle())

            Text("Selected: \(kind_of_Map[selectedSegment])")

            MapViewController()
        }
    }
}

struct MapViewController: UIViewRepresentable {


    func makeUIView(context: Context) -> MKMapView {

        let mapView = MKMapView(frame: .zero)
        mapView.mapType = .kind_of_Map
        mapView.showsScale = true
        mapView.showsTraffic = true
        mapView.showsCompass = true
        mapView.showsUserLocation = true
        mapView.showsBuildings = true
        return mapView

    }

太感谢了。

Answer 1

我在下面编写的代码将起作用。

struct ContentView: View {

    @State private var selectedSegment = 0
    @State var mapTypeItems: [String: MKMapType] = ["Hybrid": .hybrid, "Standart": .standard, "Hybrid Flyover": .hybridFlyover]

    var body: some View {
        VStack {
            Picker(selection: $selectedSegment, label: Text("")) {
                ForEach(0..<mapTypeItems.count) { index in
                    Text(self.getMapType(index: index).key)
                }
            }.pickerStyle(SegmentedPickerStyle())
            MapView(mapType: getMapType(index: self.selectedSegment).value)
                .edgesIgnoringSafeArea(.all)
        }
    }

    func getMapType(index: Int) -> (key: String, value: Binding<MKMapType>) {
        let indexItem = mapTypeItems.index(mapTypeItems.startIndex, offsetBy: index)
        return (mapTypeItems.keys[indexItem], $mapTypeItems.values[indexItem])
    }
}

struct MapView: UIViewRepresentable {

    @Binding var mapType: MKMapType

    func makeUIView(context: Context) -> MKMapView {
        let mapView = MKMapView()
        mapView.mapType = mapType
        mapView.showsScale = true
        mapView.showsTraffic = true
        mapView.showsCompass = true
        mapView.showsUserLocation = true
        mapView.showsBuildings = true
        return mapView
    }

    func updateUIView(_ uiView: MKMapView, context: Context) {
        uiView.mapType = self.mapType
    }
}

Answer 2

如果您有兴趣，这是另一种方法，它可以稍微减少代码，并消除上述代码中出现的错误，即每次启动应用程序时段都会发生变化。

struct MapTypeSelect {
    var title: String
    var map: MKMapType
}

struct ContentView: View {

    @State private var selectedSegment = 0
    @State private var mapSelect = [MapTypeSelect(title: "Standard", map: .standard), MapTypeSelect(title: "Satellite", map: .satellite), MapTypeSelect(title: "Hybrid", map: .hybrid)]


var body: some View {

    VStack {
        HStack {
            Picker(selection: $selectedSegment, label: EmptyView()) {
                ForEach(0 ..< mapSelect.count) {
                    Text(self.mapSelect[$0].title).tag($0)
                }
            }.pickerStyle(SegmentedPickerStyle())
        }
            MapView(mapType: mapSelect[selectedSegment].map)
                .edgesIgnoringSafeArea(.all)
        }
    }
}

struct MapView: UIViewRepresentable {

    var mapType: MKMapType

    func makeUIView(context: Context) -> MKMapView {

        let mapView = MKMapView(frame: .zero)

        let center = CLLocationCoordinate2D(latitude: -33.3208, longitude: 151.2336)
        let region = MKCoordinateRegion(center: center, latitudinalMeters: 55000, longitudinalMeters: 55000)
        mapView.setRegion(region, animated: true)

        mapView.mapType = mapType
        mapView.showsScale = true
        mapView.showsTraffic = true
        mapView.showsCompass = true
        mapView.showsUserLocation = true
        mapView.showsBuildings = true
        return mapView
    }

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

        view.mapType = self.mapType

    }
}