コールアウトのボタンがタップされた時にアノテーションの色を変えるにはどうすればいいでしょうか？

Question

アノテーションのボタンをタップしたら色が変わるようにしたいのですが、よくわからないことになっています。

0. mapView:viewFor　に　markerView.markerTintColor = .green を記述して色が変わる
0. mapView:viewFor　で色が変えられるのだから色を変えるコードは間違っていない
0. ところが、mapView:calloutAccessoryControlTapped　で同じコードを使うと色が変わらない
0. control == view.leftCalloutAccessoryView　が間違っている？
0. 念の為　markerView.markerTintColor = .blue　をelse{}に入れてみたら色が変わらない
0. ということは、markerView.markerTintColor　は　mapView:calloutAccessoryControlTapped　では使えない

では、markerView.markerTintColor を使わずにアノテーションの色を変えるにはどうすればいいのでしょうか？

markerView = MKMarkerAnnotationView()

//選択したアノテーションにボタンを追加する
    func mapView(_ mapView: MKMapView, viewFor annotation: MKAnnotation) -> MKAnnotationView? {　　
　　　　　　　//アノテーションを緑にする　　　ここは機能する　⭕
            markerView.markerTintColor = .green
        }
    

    //吹き出しアクササリー押下時の呼び出しメソッド
    func mapView(_ mapView: MKMapView, annotationView view: MKAnnotationView, calloutAccessoryControlTapped control: UIControl) {
        if(control == view.leftCalloutAccessoryView) {
　　　　　　　　　　//機能しない　❌
                markerView.markerTintColor = .blue
        } else {
　　　　　　　//右のボタンが押された場合はピンを消す。　　　機能する⭕
            mapView.removeAnnotation(view.annotation!)
        }
    }

メソッドの全コードです。

　　　　  markerView = MKMarkerAnnotationView()

//選択したアノテーションにボタンを追加する
    func mapView(_ mapView: MKMapView, viewFor annotation: MKAnnotation) -> MKAnnotationView? {
        if annotation is MKUserLocation {
            return nil
        }
    
        //マーカーアノテーションにコールアウトを表示
        markerView.canShowCallout = true
        let pinID = "pin"
        var annotationView = mapView.dequeueReusableAnnotationView(withIdentifier: pinID) as? MKMarkerAnnotationView
        if annotationView == nil {
            annotationView = MKMarkerAnnotationView(annotation: annotation, reuseIdentifier: pinID)
            //マーカー設置の時アニメーションをつける
            markerView.animatesWhenAdded = true
            //マーカーを緑にする
            markerView.markerTintColor = .green//機能する⭕

            print("マーカーテストmarkerView:",markerView)//マーカーテストmarkerView: <MKMarkerAnnotationView: 0x7fb2ec016e00; frame = (121.802 248.686; 28 28); layer = <CALayer: 0x60000042ace0>>

            //左ボタンをアノテーションビューに追加する。
            let leftButton = UIButton()
            leftButton.frame = CGRect(x: 0, y: 0, width: 40, height: 40)
            leftButton.setTitle("????", for: UIControlState.normal)
            leftButton.setTitleColor(UIColor.black, for: UIControlState.normal)
            markerView.detailCalloutAccessoryView = leftButton

            //右ボタンをアノテーションビューに追加する。
            let rightButton = UIButton()
            rightButton.frame = CGRect(x: 0, y: 0, width: 40, height: 40)
            rightButton.setTitle("❌", for: UIControlState.normal)
            rightButton.setTitleColor(UIColor.black, for: UIControlState.normal)
            markerView.rightCalloutAccessoryView = rightButton

        } else {
            annotationView!.annotation = annotation
        }
        
        return markerView
        }
    
    //吹き出しアクササリー押下時の呼び出しメソッド
    func mapView(_ mapView: MKMapView, annotationView view: MKAnnotationView, calloutAccessoryControlTapped control: UIControl) {
// 左ボタンが押された場合は青に変える
        if(control == view.leftCalloutAccessoryView) {
                markerView.markerTintColor = .blue//機能しない❌
            print("マーカーテスト2markerView:",markerView)//表示なし
        } else {
            //右のボタンが押された場合はピンを消す。
            mapView.removeAnnotation(view.annotation!)//機能する⭕
            print("マーカーテス3トmarkerView:",markerView)//マーカーテスト3markerView: <MKMarkerAnnotationView: 0x7fb2ec016e00; frame = (121.802 248.686; 28 28); layer = <CALayer: 0x60000042ace0>>
        }
    }

Comments

[退会済みユーザー]

markerView.markerTintColor = .greenとmarkerView.markerTintColor = .blueの下でprint("markerView:",markerView)してみたらどうなりますか？ メソッドの記述が省略されていませんか？省略されているところも見たいのですが…。

[退会済みユーザー]

表示なしだと通ってないみたいですね。mapView.removeAnnotation(view.annotation!)を markerView.markerTintColor = .blueに書き換えると色が変わりますか？
変わると思うので、「// 左ボタンが押された場合は青に変える」の下で
print("control:",control)と記入してひだりボタンとやらを押してみてください

[clo.momo]

ついでに、削除した後にも追加してみました。結果は青に変えるところだけ何も表示されませんでした。緑と削除の後に追加して表示された出力は質問の全コードに追加しました。

[clo.momo]

removeを.blueに置き換えると青に変わりました！ということは、control == view.leftCalloutAccessoryViewが間違っているのではないでしょうか？

[clo.momo]

記入すると確かに出力されました。ですが、青には変わりません。 control: <UIButton: 0x7ffb33cbc400; frame = (0 0; 40 40); opaque = NO; layer = <CALayer: 0x600001032100>>

[退会済みユーザー]

ああ、ごめんなさい、print("control:",control)とprint("view.leftCalloutAccessoryView:",view.leftCalloutAccessoryView)をしてください多分違う結果が出ると思うのですが。

[clo.momo]

print("view.leftCalloutAccessoryView:",view.leftCalloutAccessoryView)はview.leftCalloutAccessoryView: nilでした。

[退会済みユーザー]

ここから憶測なんですが、メソッドが違うのではと。コード全体に渡ってMKAnnotationのメソッドをつかっているようですが、操作している対象はMKMarkerAnnotationView()のように見えるので。private func mapView(_ mapView: MKMapView, annotationView view: MKMarkerAnnotationView, calloutAccessoryControlTapped control: UIControlをつかってみたらどうかと思うもですが？

ボケててすいません、間違えました。controlに値が入ってきているようなので、メソッドはキチンと動いてますね。

[退会済みユーザー]

markerView.detailCalloutAccessoryView = leftButtonのdetailと
if(control == view.leftCalloutAccessoryView) のleftで表記が違うので、leftかdetailどちらかに統一するとうごくと思いますがどうですか？

[clo.momo]

detailを指摘して頂いたおかげで謎が解けました！コールアウトはdetailがないと表示されないようです。本当に助かりました。ベストアンサーにさせて頂きたいのですが、このままじゃできないので、一度回答してもらえませんか？detailを指摘する回答をしてもらえればベストアンサーにさせていただきます。

[退会済みユーザー]

タイプミスなので、自己解決にしておいてください。

[clo.momo]

タイプミスはタイプミスなのですが、そのおかげで解決しました。本当にありがとうございました。

Answer 1

1. calloutはdetailCalloutAccessoryViewを設定
2. .frame = CGRectで枠を作る
3. setTitleなどで文字を入れるとコールアウトが表示される
4. leftCalloutAccessoryViewとrightCalloutAccessoryViewでボタンを左と右に設置できる
5. mapView:calloutAccessoryControlTappedでボタンが押された時のアクションを指定する

ボクが左ボタンを押してもうまく機能しなかった理由は、左ボタンにdetailを設定して、leftCalloutを設定していなかったから。

detailを設定しているからコールアウトが表示されるけど、leftを設定していないから左ボタンを押しても反応しない。

1. mapView:calloutAccessoryControlTapped　で　annotationView　に　markerTintColor　を使いたいので型キャスト？を使う。これで　annotationView.markerTintColor = .blue　と設定することができる
2. このままだとマーカーを青にして削除した後にマーカーを追加すると青のマーカーを追加してしまうので、削除した後に　annotationView.markerTintColor = .red　で赤に戻す

//選択したアノテーションにボタンを追加する
    func mapView(_ mapView: MKMapView, viewFor annotation: MKAnnotation) -> MKAnnotationView? {
        //ユーザーにアノテーションが適用されるのを防ぐ
        if annotation is MKUserLocation {
            return nil
        }

        let pinID = "pin"
        var annotationView = mapView.dequeueReusableAnnotationView(withIdentifier: pinID) as? MKMarkerAnnotationView
        if annotationView == nil {
            annotationView = MKMarkerAnnotationView(annotation: annotation, reuseIdentifier: pinID)
        } else {
            annotationView?.annotation = annotation
        }

        //マーカー設置の時アニメーションをつける
        annotationView?.animatesWhenAdded = true
        //マーカーアノテーションにコールアウトを表示
        annotationView?.canShowCallout = true
        //コールアウトを表示 ☆★☆★☆★これがないとタップしてもコールアウトが表示されない☆★☆★☆★
        let centerButton = UIButton()
        centerButton.frame = CGRect(x: 0, y: 0, width: 80, height: 40)
        centerButton.setTitle("バブル", for: UIControlState.normal)
        annotationView?.detailCalloutAccessoryView = centerButton

        //左ボタンをアノテーションビューに追加する。
        let leftButton = UIButton()
        leftButton.frame = CGRect(x: 0, y: 0, width: 40, height: 40)
        leftButton.setTitle("左", for: UIControlState.normal)
        leftButton.setTitleColor(UIColor.black, for: UIControlState.normal)
        annotationView?.leftCalloutAccessoryView = leftButton


        //右ボタンをアノテーションビューに追加する。
        let rightButton = UIButton()
        rightButton.frame = CGRect(x: 0, y: 0, width: 40, height: 40)
        rightButton.setTitle("右", for: UIControlState.normal)
        rightButton.setTitleColor(UIColor.black, for: UIControlState.normal)
        annotationView?.rightCalloutAccessoryView = rightButton

        return annotationView
        }
    
    //吹き出しアクササリー押下時の呼び出しメソッド
    func mapView(_ mapView: MKMapView, annotationView view: MKAnnotationView, calloutAccessoryControlTapped control: UIControl) {
        // !!!!☆★☆★　型キャストでmarkerTintColorを使えるようにする
        //if letの範囲をif~else~全体にすることでelseでもmarkerTintColorを使えるようにする
        if let annotationView = view as? MKMarkerAnnotationView {
            if(control == view.leftCalloutAccessoryView) {
          
                    annotationView.markerTintColor = .blue
            
            } else {
                mapView.removeAnnotation(view.annotation!)
                //マーカーを赤に戻さないと、青にして削除した後に追加したマーカーが青になる
                annotationView.markerTintColor = .red
            }
        }
    }

Comments

[退会済みユーザー]

回答する際にコードが省略されていたため、https://teratail.com/questions/128863　を参考にしていたのですが、解決済みだと思われますので、よろしければ、解決方法を記入してもらえませんか？
MKMarkerAnnotationViewとMKPinAnnotationViewの違いに対する情報があまりないため、後の人がハマった際にこの質問の回答と合わせて大きな助けになると思います。

[hameji]

//コールアウトを表示 ☆★☆★☆★これがないとタップしてもコールアウトが表示されない☆★☆★☆★
let centerButton = UIButton()
centerButton.frame = CGRect(x: 0, y: 0, width: 80, height: 40)
centerButton.setTitle("コールアウト", for: UIControlState.normal)
markerView.detailCalloutAccessoryView = centerButton

とありますが、本当ですか？
自分の環境だと、これがなくても、
タップした際にcalloutが表示されましたよ？
なしありを比較すると、calloutで表示されるViewの大きさが違いました。
当然真ん中にボタンがある分、大きいViewが表示されました。
また、centerButton.setTitleColor(UIColor.black, for: UIControlState.normal)

を記入してないと、白文字なのか、
「コールアウト」という文字は見えませんでした。

[clo.momo]

すみません。その前にバグが発生したので現在修正中です。
markerViewを使うとアノテーションが1つしか使えず他の不具合も起こるのでannotationViewに変更しました。最後の問題は左ボタンをタップしてマーカーの色を変えるところです。

markerView.markerTintColor = .blue

これを使いたいのですが、annotationViewはMKAnnotationViewなので使えません。
使えるようにするにはどうすればいいのでしょうか？

[clo.momo]

>>hamejiさん
再度detailCalloutAccessoryViewがなくても表示されるか試してみました。
結果はコールアウトは表示されませんでした。
こちらの環境では必要みたいです。
centerButtonは他のボタンを表示するために作っているので、私にとっては文字は見えなくても問題ありません。

[退会済みユーザー]

なんだか、未解決になったようなので高評価取り消します。無責任に高評価押してごめんなさい。

[clo.momo]

何度もすみません。今度こそ解決したはずです。

[hameji]

>> clo.momoさん

調べてみると、detalCalloutAccessoryViewは
subtitleに文字を表示しない代わりに違うUI パーツを表示したい時に
使うものみたいですよ。
下記をご参照ください

https://dev.classmethod.jp/smartphone/ios-mapkit/

なので、Callout自体はなくてもクリックで表示されるはずだと思います。

Answer 2

すいません、よくわからなのですが、
上記のコードはそれぞれ、同じ色となってますが、

別々に(どちらかをコメントアウト)して、試してるんですよね？
それで、色がうまくいかないという事でいいんですか？

Comments

[clo.momo]

分かりにくくてすみません。そうです。別の色に変えようとしてもできません。
質問のコードを修正しました。

[hameji]

解決方法を見つけたのですね。

ググって、試行錯誤していましたが、
解決コードを見いだすことができなかったです。

載せていただた方法自分も試してみます。