前提・実現したいこと
プログラミング初心者です。現在SwiftUIのMap()を用いてマップアプリを製作中です。
アノテーションしたい複数の地点(Spot)を配列spotlistに格納し、それらのアノテーションをタップすることでハーフモーダルを表示するアプリを作りたいと思っています。
(地点をタップすることでそのスポットの説明欄を表示させたいです)
アノテーションをボタンに置き換えてタップすることでハーフモーダルを表示させることはできたのですが、それぞれのボタンをタップするごとに違うハーフモーダルを表示させる方法がわかりません。
Button1 , Button2, Button3のように複数のボタンを用意し、それぞれにhalfModal1, halfModal2, halfModal3のように地道に適用させていくやり方は知っているのですが以下のコードでは、Map()内のannotationContentの中にボタンを配置しているため、複数のボタンが置けないのではないかと思います。
この場合はどうすればannotationContentの中に複数のボタンの処理を加えることができますか?
もし上記の実装が不可能であれば、代わりにどのようなものを利用したらいいかなどアドバイスをいただければ幸いです。
また、スポットの説明欄を表示させたいので、ハーフモーダル以外に最適なものがあれば是非教えていただきたいです。
よろしくお願い致します。
〜追記〜
アプリ開発を始めたばかりでstoryboardは使えず、swiftUIしか使えません。
cocoapodsライブラリの導入などはできます。
MKmapViewでのマップ制作はやったことがありますが、複数の地点を配列に格納してまとめてアノテーションを置けることやアノテーションの種類が豊富なためswiftUIを用いてマップ制作をしています。googleAPIも使いたいのですが、swiftUIでの使い方が載ってるサイトが少なく使い方がわからず断念してしまいました。
現在は、swiftUIのMao()でどこまでの実装ができるかもいまいちわかっていない状況です。
上記の実装をしたいのですが、知識不足なため可能な実装かも判断がついていません。
とても初歩的な質問で恐縮ですが、ご回答よろしくお願いいたします。
発生している問題・エラーメッセージ
該当のソースコード
Swift
1 2//以下、マップ表示画面の[UImapView.swift] 3 4import SwiftUI 5import MapKit 6 7//スポットの構造体 8struct Spot: Identifiable{ 9 let id = UUID() 10 let name: String 11 let latitude: Double 12 let longitude: Double 13 var coordinate: CLLocationCoordinate2D{ 14 CLLocationCoordinate2D(latitude: latitude, longitude: longitude) 15 } 16} 17 18//以下、複数の地点を配列に格納 19struct UImapView: View { 20 let spotlist = [ 21 Spot(name: "田代島", latitude: 38.29583470985645, longitude: 141.41655143199566), 22 23 //35.300722427834344, 139.48086889739656 24 Spot(name: "江ノ島", latitude: 35.300722427834344, longitude: 139.48086889739656), 25 Spot(name: "沖島", latitude: 35.20840234119743, longitude: 136.0637832359919) 26 ] 27 28//以下、初期表示の位置情報 29 @State var region = MKCoordinateRegion( 30 center: CLLocationCoordinate2D( 31 latitude: 35.39175148, longitude: 139.44300970 32 ), 33 latitudinalMeters: 1850000.0, 34 longitudinalMeters: 1850000.0 35 ) //日本列島全体が表示される 36 37//ハーフモーダルを表示するために状態変数を用意 38 @State var isModal: Bool = false 39 40 var body: some View { 41 42 ZStack { 43 Map( 44 coordinateRegion: $region, 45 interactionModes: .all, 46 annotationItems: spotlist, 47 annotationContent: {spot in MapAnnotation 48(coordinate: spot.coordinate, anchorPoint: CGPoint(x: 0.5, y: 0.5), content: { 49 Text(spot.name) 50 .font(.caption2) 51 .foregroundColor(Color.gray) 52 Button(action: { 53 //タップした時の処理(全てのボタンに適用) 54 isModal = true 55 //ハーフモーダルを使ってスポットの説明欄を表示させる 56 }) { 57 Image(systemName: "heart.fill").foregroundColor(.red) 58 } 59 60 })} 61 ).edgesIgnoringSafeArea(.bottom) 62 .sheet(isPresented: $isModal) { 63 halfModal1(halfModal: $isModal) 64 } 65 } 66 .navigationTitle(Text("MAP")) 67 .navigationBarTitleDisplayMode(.inline) 68 } 69 70} 71
試したこと
補足情報(FW/ツールのバージョンなど)
Xcode12.5 , Swift5.4
あなたの回答
tips
プレビュー