🪶

SwiftUI + Mapkit タップした場所に移動

2024/07/22に公開

iOS

SwiftUI

MapKit

tech

タップした場所の位置情報を表示

SwiftUI + Mapkitを使用して、仮で作ったUIですが、配列の中に入っている位置情報をリストで表示して、選択した駅名をタップすると、マップの画面が切り替わって、選択した位置情報を表示するロジックを作ってみました。

これはある機能を作るための試作品なので、UIはカッコよくないです😅

駅の配列で使う構造体を定義する。

struct Station: Identifiable {
    let id = UUID()
    let name: String
    let coordinate: CLLocationCoordinate2D
}

配列に値を代入した複数のStationの構造体を格納する。

let stations = [
        Station(name: "渋谷駅", coordinate: CLLocationCoordinate2D(latitude: 35.6580, longitude: 139.7016)),
        Station(name: "新宿駅", coordinate: CLLocationCoordinate2D(latitude: 35.6896, longitude: 139.7006)),
        Station(name: "中野駅", coordinate: CLLocationCoordinate2D(latitude: 35.7056, longitude: 139.6659)),
        Station(name: "東京駅", coordinate: CLLocationCoordinate2D(latitude: 35.6812, longitude: 139.7671)),
        Station(name: "池袋駅", coordinate: CLLocationCoordinate2D(latitude: 35.7295, longitude: 139.7109)),
        Station(name: "上野駅", coordinate: CLLocationCoordinate2D(latitude: 35.7141, longitude: 139.7774))
    ]

全体のコードはこちら

Mapで、UIに地図を表示。下に、Listを表示。表示されている駅名をタップすると、指定された場所に、移動して、地図に位置情報が表示される。

import SwiftUI
import MapKit

struct Station: Identifiable {
    let id = UUID()
    let name: String
    let coordinate: CLLocationCoordinate2D
}

struct ContentView: View {
    @State private var searchText = ""
    @State private var selectedStation: Station?
    @State private var region = MKCoordinateRegion(
        center: CLLocationCoordinate2D(latitude: 35.6812, longitude: 139.7671),
        span: MKCoordinateSpan(latitudeDelta: 0.1, longitudeDelta: 0.1)
    )
    
    let stations = [
        Station(name: "渋谷駅", coordinate: CLLocationCoordinate2D(latitude: 35.6580, longitude: 139.7016)),
        Station(name: "新宿駅", coordinate: CLLocationCoordinate2D(latitude: 35.6896, longitude: 139.7006)),
        Station(name: "中野駅", coordinate: CLLocationCoordinate2D(latitude: 35.7056, longitude: 139.6659)),
        Station(name: "東京駅", coordinate: CLLocationCoordinate2D(latitude: 35.6812, longitude: 139.7671)),
        Station(name: "池袋駅", coordinate: CLLocationCoordinate2D(latitude: 35.7295, longitude: 139.7109)),
        Station(name: "上野駅", coordinate: CLLocationCoordinate2D(latitude: 35.7141, longitude: 139.7774))
    ]
    
    var filteredStations: [Station] {
        if searchText.isEmpty {
            return stations
        } else {
            return stations.filter { $0.name.contains(searchText) }
        }
    }
    
    var body: some View {
        NavigationStack {
            VStack {
                Map(coordinateRegion: $region, annotationItems: [selectedStation].compactMap { $0 }) { station in
                    MapMarker(coordinate: station.coordinate)
                }
                .frame(height: 300)
                
                List(filteredStations) { station in
                    Button(action: {
                        selectedStation = station
                        region = MKCoordinateRegion(
                            center: station.coordinate,
                            span: MKCoordinateSpan(latitudeDelta: 0.01, longitudeDelta: 0.01)
                        )
                    }) {
                        Text(station.name)
                    }
                }
                .searchable(text: $searchText, prompt: "駅を検索")
            }
            .navigationTitle("東京の駅")
        }
    }
}

#Preview {
    ContentView()
}

動作はこんな感じです

最後に

リストをタップすると、指定した場所の位置情報が地図に表示される機能を実装してみました。参考になりましたらいいねお願いします💚💙

タップした場所の位置情報を表示

全体のコードはこちら

最後に

Discussion