SwiftUIでMapを使う。Mapに画像や図形を表示する


SwiftUIでMapを使う。Mapに画像や図形を表示する法です。

SwiftUIでMapを使う。Mapに画像や図形を表示する

ContentView.swift

import SwiftUI
import MapKit

struct ContentView: View {
    // Tokyo Station(35.6812° N, 139.7671° E)
    let tokyoStation = MKCoordinateRegion(center: CLLocationCoordinate2D(latitude: 35.6812, longitude: 139.7671), latitudinalMeters: 10000, longitudinalMeters: 10000)

    var body: some View {
        Map(initialPosition: .region(tokyoStation)) {
            // Akihabara Station(35.6984° N, 139.7731° E)
            MapCircle(center: CLLocationCoordinate2D(latitude: 35.6984, longitude: 139.7731), radius: CLLocationDistance(800))
                .foregroundStyle(.orange.opacity(0.60))
                .mapOverlayLevel(level: .aboveLabels)

            // Snorlax at Akihabara Station(35.6984° N, 139.7731° E)
            Annotation("Snorlax", coordinate: CLLocationCoordinate2D(latitude: 35.6984, longitude: 139.7731)) {
                Image(.snorlax)
                    .resizable()
                    .frame(width: 60, height: 60)
                    .scaledToFit()
            }

            // Polygon
            MapPolygon(coordinates: [
                // Shibuya Station(35.6580° N, 139.7016° E)
                CLLocationCoordinate2D(latitude: 35.6580, longitude: 139.7016),

                // Akihabara Station(35.6984° N, 139.7731° E)
                CLLocationCoordinate2D(latitude: 35.6984, longitude: 139.7731),
                
                // Tokyo Station(35.6812° N, 139.139.7671° E)
                CLLocationCoordinate2D(latitude: 35.6812, longitude: 139.7671)
            ])
            .foregroundStyle(.blue.opacity(0.60))
            .mapOverlayLevel(level: .aboveLabels)
        }
    }
}