SwiftUIでいこう - Map

Map | Apple Developer Documentation

Maps & Location - Topics - WWDC23

【WWDC23】Meet MapKit for SwiftUI（日本語訳） - iPhoneアプリ開発講座｜CodeCandyオンラインプログラミングスクール

Map、地図を表示する方法を見ていきます。SwiftUIではMapKitをインポートするといろんなことができるようになります。

まず、単純に場所を指定してピンを立てます。

  let osaka = CLLocationCoordinate2D(
        latitude: 34.68738816139015, 
        longitude: 135.52592009948697
    )

これで軽度、緯度を CLLocationCoordinate2D適応させたものを変数に入れます。この位置情報を使って、 Map()の Marker()で表示させます。

import SwiftUI
import MapKit

struct ContentView: View {
    
    let osaka = CLLocationCoordinate2D(
        latitude: 34.68738816139015, 
        longitude: 135.52592009948697
    )
    
    var body: some View {
        Map(){
              Marker("大阪城",coordinate: osaka)
        }
    }
}

実行画面です。大阪城にピンが立ちました。

Annotation | Apple Developer Documentation

  var body: some View {
        Map(){
              Marker("大阪城",coordinate: osaka)
            
              Annotation("Osaka Cattle", coordinate: osaka) {
                ZStack {
                    RoundedRectangle(cornerRadius: 10)
                        .fill(Color.blue)
                    Text("大阪城の場所")
                        .padding(5)
                        .foregroundColor(Color.white)
                }
             }
        }
    }

Annotation()でピンを立てたところに注意書き、アノテーションを表示させます。 ZStackでレイヤー構造を作って重なりを作ります。

"MapCircle"を追加。

    var body: some View {
        Map(){
              Marker("大阪城",coordinate: osaka)
            
              Annotation("Osaka Cattle", coordinate: osaka) {
                ZStack {
                    RoundedRectangle(cornerRadius: 10)
                        .fill(Color.blue)
                    Text("大阪城の場所")
                        .padding(5)
                        .foregroundColor(Color.white)       
                }
             }
            MapCircle(center:  osaka, radius: 100)
                .foregroundStyle(.orange.opacity(0.2))
            
        }
    }

オレンジの円が出てきます。

"."で繋ぐモディファイアで機能を追加することが出来ます。