📍

Mapkitのpinをカスタマイズしてみる

2024/02/14に公開

iOS

SwiftUI

MapKit

tech

読んでほしい人

SwiftUIで開発している人
MapKitに興味がある人

補足情報

Mac OSは、macOS Sonomaにバージョンアップして、x-code15にしないと、最近やってみたチュートリアルができませんでした!

記事の内容

WWDC23なるもので、発表されたSwiftUI用のMapKitを使うチュートリアルをやってみました。

今回はこちらの動画を参考に日本の渋谷の指定した場所の位置情報を表示してみました🌏

GoogleMapを使ってお好きな場所の座標を指定いしてみてください。pinが立っているところで右クリックすると、座標が現れる。これをコピーして指定した場所にpinが立ちます。

今回は、公園の場所ぽくするために、pinを葉っぱにして、色も緑にしました。systemImageでiconの種類を指定して、coordinate: park).tint(.green)で、pinの色を変更することができます。

Marker("杉並区立杉並児童交通公園", systemImage: "leaf", coordinate: park).tint(.green)

ソースコード:

import SwiftUI
import MapKit

struct ContentView: View {
    // Google Mapの座標
    // 35.691326688882796, 139.63133197863422
    let park = CLLocationCoordinate2D(latitude: 35.691326688882796, longitude: 139.63133197863422)
    
    @State var camera: MapCameraPosition = .automatic
    
    var body: some View {
        Map() {
            // マーカーに名前をつける
            Marker("杉並区立杉並児童交通公園", systemImage: "leaf", coordinate: park).tint(.green)
        }
        .safeAreaInset(edge: .bottom) {
            HStack {
                Spacer()
                Button {
                    camera = .region(MKCoordinateRegion(center: park, latitudinalMeters: 200, longitudinalMeters: 200
                    ))
                } label: {
                    Text("杉並区立杉並児童交通公園")
                }
                Spacer()
                    .padding(.top)
                    .background(.thinMaterial)
            }
        }
//        .mapStyle(.imagery)
    }
}

#Preview {
    ContentView()
}

.mapStyle(.imagery)をつけると、表示されているMapが画像に切り替わります。

import SwiftUI
import MapKit

struct ContentView: View {
    // Google Mapの座標
    // 35.691326688882796, 139.63133197863422
    let park = CLLocationCoordinate2D(latitude: 35.691326688882796, longitude: 139.63133197863422)
    
    @State var camera: MapCameraPosition = .automatic
    
    var body: some View {
        Map() {
            // マーカーに名前をつける
            Marker("杉並区立杉並児童交通公園", systemImage: "leaf", coordinate: park).tint(.green)
        }
        .safeAreaInset(edge: .bottom) {
            HStack {
                Spacer()
                Button {
                    camera = .region(MKCoordinateRegion(center: park, latitudinalMeters: 200, longitudinalMeters: 200
                    ))
                } label: {
                    Text("杉並区立杉並児童交通公園")
                }
                Spacer()
                    .padding(.top)
                    .background(.thinMaterial)
            }
        }
        .mapStyle(.imagery)
    }
}

#Preview {
    ContentView()
}

画質が荒いが移動すると綺麗になります😅

高画質になった✨

最後に

今回は、SwiftUIでMapKitを使って渋谷の指定した場所にpinを立てて、見た目をカスタマイズしてみました。興味ある人は遊んでみてね💙🧡

読んでほしい人

補足情報

記事の内容

最後に

Discussion