MapKit中点击选择备选路线时出现路线识别错误的问题求助

Hey Arun, I’ve run into this exact MapKit route selection headache before—those finicky tap misses and wrong picks can be super frustrating! Let’s break down why your current code is misfiring and fix it step by step.

Why the Issue Happens #

Your implementation has two key pain points causing incorrect selections:

1. Overlay Traversal Order: You’re iterating through mapView.overlays in the order they were added (oldest to newest). When routes overlap, the first matching overlay you find is the one underneath the user’s actual tap (since newer routes draw on top).
2. Precise Hit Detection: Using path.contains(polylinePoint) checks for an exact pixel match on the line, which is unreliable—users rarely tap the exact 1-pixel line, especially if routes are thin or overlapping.

Step-by-Step Fixes #

1. Check Topmost Routes First #

Reverse the overlay loop order to check the newest (topmost) routes first. This ensures you select the route the user actually sees and taps on:

@objc func isTappedOnPolygon(with tapGesture:UITapGestureRecognizer) {
    // Only process the tap when it ends to avoid false hits
    guard tapGesture.state == .ended else { return }
    
    let touchPoint = tapGesture.location(in: mapView)
    let touchCoordinate = mapView.convert(touchPoint, toCoordinateFrom: mapView)
    let mapPoint = MKMapPoint(touchCoordinate)
    var selectedOverlay: MKPolyline?
    
    // Reverse overlay order to prioritize topmost routes
    for overlay in mapView.overlays.reversed() {
        guard let polyline = overlay as? MKPolyline else { continue }
        guard let polylineRenderer = mapView.renderer(for: polyline) as? MKPolylineRenderer else { continue }
        
        let polylinePoint = polylineRenderer.point(for: mapPoint)
        // Replace exact point check with distance-based detection
        let distanceToRoute = polylineRenderer.path.distance(to: polylinePoint)
        
        // Consider tap valid if it's within half the route's line width
        if distanceToRoute <= polylineRenderer.lineWidth / 2 {
            selectedOverlay = polyline
            break
        }
    }
    
    // Handle the selected overlay (we'll link it to the actual MKRoute next)
    if let selectedPolyline = selectedOverlay {
        print("Selected route overlay: \(selectedPolyline)")
    }
}

2. Link Overlays to Original Routes #

To connect the selected MKPolyline back to your original MKRoute (for details like distance or steps), create a dictionary to map overlays to their parent routes when adding them:

// Add this property to your view controller
private var routeOverlayMap: [MKPolyline: MKRoute] = [:]

// Update your directions.calculate completion handler
directions.calculate { response, error in
    if let error = error {
        self.showAlert(message: "Route not found: \(error.localizedDescription)")
        return
    }
    guard let routes = response?.routes else { return }
    
    self.routeOverlayMap.removeAll() // Clear old routes first
    self.mapRoutes.removeAll()
    
    for route in routes {
        self.mapRoutes.append(route)
        let polyline = route.polyline
        self.routeOverlayMap[polyline] = route // Store the route-overlay mapping
        self.mapView.addOverlay(polyline)
        
        // Adjust map frame to fit all routes
        self.mapView.setVisibleMapRect(
            self.mapView.visibleMapRect.union(polyline.boundingMapRect),
            edgePadding: UIEdgeInsets(top: 0, left: padding, bottom: padding, right: padding),
            animated: true
        )
    }
}

Now you can easily retrieve the full route from the selected overlay:

if let selectedPolyline = selectedOverlay, let selectedRoute = routeOverlayMap[selectedPolyline] {
    // Use the selected route details, e.g., show distance or steps
    print("Selected route distance: \(selectedRoute.distance) meters")
}

3. Optional: Highlight Selected Routes #

To make selections clear to users, update your overlay renderer to style the selected route differently:

private var selectedPolyline: MKPolyline?

func mapView(_ mapView: MKMapView, rendererFor overlay: MKOverlay) -> MKOverlayRenderer {
    guard let polyline = overlay as? MKPolyline else {
        return MKOverlayRenderer(overlay: overlay)
    }
    
    let renderer = MKPolylineRenderer(polyline: polyline)
    renderer.lineWidth = 4.0
    
    // Style selected route with a distinct color
    if polyline == selectedPolyline {
        renderer.strokeColor = .systemBlue
    } else {
        renderer.strokeColor = .systemGray.withAlphaComponent(0.7)
    }
    
    return renderer
}

// Update your tap handler to refresh the map styling
if let selectedPolyline = selectedOverlay {
    self.selectedPolyline = selectedPolyline
    self.mapView.reloadInputViews() // Refresh overlays to show selection
}

These changes should eliminate incorrect route picks and make your tap gesture much more reliable. Let me know if you hit any edge cases!

内容的提问来源于stack exchange，提问作者Arun Raja