iOS 17 MapKit API绘制MapPolyline不显示的解决咨询

你的代码里有几个关键问题导致Polyline无法显示，修正方案如下：

问题分析与修复步骤 #

• 移除无关的Text组件：原代码中Text("Hello, World!")会占据屏幕顶部空间，压缩Map的显示区域，甚至可能让Map完全处于可视区域外，直接删除即可。
• 设置Map初始显示区域：默认Map不会自动聚焦到你的坐标点，需要手动指定初始区域，确保所有标记和Polyline都在视野内。
• 修正Polyline样式修饰：.tint()无法作用于MapPolyline的描边样式，需直接在.stroke()中指定颜色和线宽。

修改后的完整代码 #

import SwiftUI
import MapKit

struct JunkMapView: View {
    // 定义所有坐标点，方便复用
    private let coordinates = [
        CLLocationCoordinate2D(latitude: 42.2926854029081, longitude: -71.0679634411345),
        CLLocationCoordinate2D(latitude: 42.4281694052464, longitude: -71.1093263739832),
        CLLocationCoordinate2D(latitude: 42.3717488333676, longitude: -71.0670886507071)
    ]
    
    // 计算覆盖所有坐标的初始区域
    private var initialRegion: MKCoordinateRegion {
        MKCoordinateRegion(coordinates: coordinates, latitudinalMeters: 20000, longitudinalMeters: 20000)
    }
    
    var body: some View {
        Map(initialPosition: .region(initialRegion)) {
            Marker("da Spot!!", coordinate: coordinates[0])
            Marker("da Udder Spot!!", coordinate: coordinates[1])
            Marker("da midl Spot!!", coordinate: coordinates[2])
            
            MapPolyline(coordinates: coordinates, contourStyle: .geodesic)
                .mapOverlayLevel(.aboveLabels)
                .stroke(.pink, lineWidth: 130)
        }
    }
}

#Preview {
    JunkMapView()
}

额外说明 #

• MKCoordinateRegion(coordinates:latitudinalMeters:longitudinalMeters:)会自动计算包含所有坐标的区域，参数里的20000表示区域的南北/东西跨度（单位：米），可根据需求调整。
• .mapOverlayLevel(.aboveLabels)确保Polyline显示在地图标签上方，避免被遮挡，这个设置是没问题的，可以保留。

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