swiftUI 中未显示折线

Question

Hi everyone I've been working for a few days to show a straight line on my map. I use swiftUI and mapkit to render the map . what I want to achieve is a straight line between the two annotations, these are shown on the map .

Dit is de code die ik op dit moment heb. Ik hoop dut jullie mij kunnen helpen want ik kom er niet uit.

import MapKit

struct MapViewWorldDetail: UIViewRepresentable {

    var StartCoordinate: CLLocationCoordinate2D
    var EndCoordinate: CLLocationCoordinate2D
    var name: String
    @Binding var region: CLLocationCoordinate2D

    func makeUIView(context: Context) -> MKMapView {
        MKMapView(frame: .zero)
    }

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

        let span = MKCoordinateSpan(latitudeDelta: 50, longitudeDelta: 50)
        let region = MKCoordinateRegion(center: self.region, span: span)
//      view.mapType = MKMapType.satelliteFlyover;
        view.setRegion(region, animated: true)

        let annotation = MKPointAnnotation()
        annotation.coordinate = StartCoordinate
        annotation.title = name
        view.addAnnotation(annotation)

        let annotationEnd = MKPointAnnotation()
        annotationEnd.coordinate = EndCoordinate
        annotationEnd.title = name
        view.addAnnotation(annotationEnd)

        let aPolyline = MKGeodesicPolyline(coordinates: [StartCoordinate, EndCoordinate], count: 2)
        view.addOverlay(aPolyline)
    }
}

Answer 1

Note on the straight line you are drawing: The line that you are drawing using MKGeodesicPolyline has this note in the Apple Developer Documentation:

MKGeodesicPolyline - When displayed on a two-dimensional map view, the line segment between any two points may appear curved.

---

Example of working code

---

In SwiftUI, you'll need to implement the MKMapViewDelegate in a Coordinator class, which is where the Overlay handling is taken care of:

1. Add this to func updateUIView

    func updateUIView(_ view: MKMapView, context: UIViewRepresentableContext<MapView>) {

      // Stuff you already had in updateUIView
      // :
      // adding this at the end is sufficient
      mapView.delegate = context.coordinator
    }

2. Add this to your struct, struct MapViewWorldDetail

    // MARK: - Coordinator for using UIKit inside SwiftUI.
    func makeCoordinator() -> MapView.Coordinator {
        Coordinator(self)
    }

    final class Coordinator: NSObject, MKMapViewDelegate {
        var control: MapView

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

        // MARK: - Managing the Display of Overlays

        func mapView(_ mapView: MKMapView, rendererFor overlay: MKOverlay) -> MKOverlayRenderer {
            print("mapView(_:rendererFor:)")
            if let polyline = overlay as? MKPolyline {

                let polylineRenderer = MKPolylineRenderer(overlay: polyline)
                polylineRenderer.strokeColor = .red
                polylineRenderer.lineWidth = 3
                return polylineRenderer
            }

            return MKOverlayRenderer(overlay: overlay)
        }
    }

---

Good references to review:

• Sample project that implements the Coordinator class & delegates (but does not do overlays)

  • https://github.com/roblabs/ios-map-ui/tree/master/MapKit-SwiftUI-for-iOS-macOS

• Medium posts by others

  • https://medium.com/better-programming/exploring-mapkit-on-ios-13-1a7a1439e3b6
  • https://medium.com/flawless-app-stories/mapkit-in-swiftui-c0cc2b07c28a