ios - 当我在 SwiftUI 中触摸 mapbox 的注释时如何显示 TextView？

Question

我正在研究 SwiftUi，对此我有疑问。我想在 mapbox 中显示一些地方，所以我在我指定的坐标中放置了一些注释。对于更多当我触摸注释时，我想显示关于我触摸的坐标的详细视图。地方注解代码是这样的

内容视图.swift

import SwiftUI
import Mapbox

struct ContentView: View {
    @State var showDetailInfo = false
    var body: some View {
        return VStack{
            MapView().centerCoordinate(.init(latitude: 33.4579847, longitude: 126.9421097)).zoomLevel(5)
        }
        
    }
}

mapView.swift

import Foundation
import SwiftUI
import Mapbox
import MapboxGeocoder

class CustomPointAnnotation: NSObject, MGLAnnotation {
    var coordinate: CLLocationCoordinate2D = CLLocationCoordinate2D(latitude: 0, longitude: 0)
    var title: String?
    var subtitle: String?
    var toolTip:String?
    // Custom properties that we will use to customize the annotation's image.
    var image: UIImage?
    var reuseIdentifier: String?
    init(coordinate: CLLocationCoordinate2D, title: String?, subtitle: String?,toolTip : String?,image:UIImage?) {
        self.coordinate = coordinate
        self.title = title
        self.subtitle = subtitle
        self.toolTip = toolTip
        self.image = image
    }
}
class CustomAnnotationView: MGLAnnotationView {
    override func layoutSubviews() {
        super.layoutSubviews()
        layer.cornerRadius = bounds.width / 2
        layer.borderWidth = 2
        layer.borderColor = UIColor.systemPink.cgColor
    }
    override func setSelected(_ selected: Bool, animated: Bool) {
        super.setSelected(selected, animated: animated)
        let animation = CABasicAnimation(keyPath: "borderWidth")
        animation.duration = 2
        layer.borderWidth = selected ? bounds.width / 4 : 2
        layer.add(animation, forKey: "borderWidth")
    }
}
struct MapView: UIViewRepresentable {
    private let mapView: MGLMapView = MGLMapView(frame: .zero, styleURL: MGLStyle.streetsStyleURL)

    // MARK: - Configuring UIViewRepresentable protocol
    func makeUIView(context: UIViewRepresentableContext<MapView>) -> MGLMapView {
        mapView.delegate = context.coordinator
        mapView.zoomLevel = 1
        // Specify coordinates for our annotations.
        let coordinates = [
            CLLocationCoordinate2D(latitude: 0, longitude: 33),
            CLLocationCoordinate2D(latitude: 0, longitude: 66),
            CLLocationCoordinate2D(latitude: 0, longitude: 99)
        ]
        // Fill an array with point annotations and add it to the map.
        var pointAnnotations = [MGLPointAnnotation]()
        for coordinate in coordinates {
            let point = MGLPointAnnotation()
            point.coordinate = coordinate
            point.title = "Kinkaku-ji"
            point.subtitle = "test"
            pointAnnotations.append(point)
        }
        mapView.addAnnotations(pointAnnotations)
        return mapView
    }
    func updateUIView(_ uiView: MGLMapView, context: UIViewRepresentableContext<MapView>) {
        print("updateUIView")
        updateAnnotations()
    }
    
    func makeCoordinator() -> MapView.Coordinator {
        print("makeCoordinator")
        return Coordinator(self)
    }
    
    // MARK: - Configuring MGLMapView
    func styleURL(_ styleURL: URL) -> MapView {
        mapView.styleURL = styleURL
        return self
    }
    func centerCoordinate(_ centerCoordinate: CLLocationCoordinate2D) -> MapView {
        mapView.centerCoordinate = centerCoordinate
        return self
    }
    func zoomLevel(_ zoomLevel: Double) -> MapView {
        mapView.zoomLevel = zoomLevel
        return self
    }
    private func updateAnnotations() {
    }
    // MARK: - Implementing MGLMapViewDelegate
    final class Coordinator: NSObject, MGLMapViewDelegate {
        var control: MapView
        @State var touchAnnotation:Bool = false
        init(_ control: MapView) {
            self.control = control
        }
        
        
        func mapView(_ mapView: MGLMapView, leftCalloutAccessoryViewFor annotation: MGLAnnotation) -> UIView? {
            if (annotation.title! == "Kinkaku-ji") {
                // Callout height is fixed; width expands to fit its content.
                //let image = UIImageView(image:  UIImage(named: "apple.png"))
                let label = UILabel(frame: CGRect(x: 0, y: 0, width: 60, height: 50))
                label.textAlignment = .right
                label.textColor = UIColor(red: 0.81, green: 0.71, blue: 0.23, alpha: 1)
                label.text = "金閣寺&quot;
                return label
            }
            return nil
        }
        func mapView(_ mapView: MGLMapView, rightCalloutAccessoryViewFor annotation: MGLAnnotation) -> UIView? {
            return UIButton(type: .detailDisclosure)
        }
        func mapView(_ mapView: MGLMapView, annotation: MGLAnnotation, calloutAccessoryControlTapped control: UIControl) {
            // Hide the callout view.
            mapView.deselectAnnotation(annotation, animated: false)
            mapView.addSubview(UIImageView(image: UIImage(named: "apple.png")))
            let alert = UIAlertController(title: annotation.title!!, message: "A lovely (if touristy) place.", preferredStyle: .alert)
            alert.addAction(UIAlertAction(title: "OK", style: .default, handler: nil))
            
        }
        
        func mapView(_ mapView: MGLMapView, didDeselect annotation: MGLAnnotation) {
            print(annotation)
        }
        
    }
    
}

在此处输入图像描述

我的代码就是这样运行的。我想在单击某个符号时显示视图？（注释）我怎样才能实现我的目标？

标签： iosswiftswiftuimapbox