質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.35%
button

HTMLで用いる<button>タグです。

Xcode

Xcodeはソフトウェア開発のための、Appleの統合開発環境です。Mac OSXに付随するかたちで配布されています。

Swift

Swiftは、アップルのiOSおよびOS Xのためのプログラミング言語で、Objective-CやObjective-C++と共存することが意図されています

配列

配列は、各データの要素(値または変数)が連続的に並べられたデータ構造です。各配列は添え字(INDEX)で識別されています。

Q&A

0回答

943閲覧

【SwiftUI】【Map】Map上でタップするButtonに応じて、表示するhalfModalを変える方法

lulufrance

総合スコア0

button

HTMLで用いる<button>タグです。

Xcode

Xcodeはソフトウェア開発のための、Appleの統合開発環境です。Mac OSXに付随するかたちで配布されています。

Swift

Swiftは、アップルのiOSおよびOS Xのためのプログラミング言語で、Objective-CやObjective-C++と共存することが意図されています

配列

配列は、各データの要素(値または変数)が連続的に並べられたデータ構造です。各配列は添え字(INDEX)で識別されています。

0グッド

0クリップ

投稿2021/07/01 03:54

前提・実現したいこと

プログラミング初心者です。現在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

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

hoshi-takanori

2021/07/06 00:19

現在選択されている spot を @State にすれば良いのでは。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.35%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問