swiftUI MAP上のPinをButtonで消すには

Question

CLLocationManager()を使って位置情報を取得し、マップ上にPinを表示した後、（たとえば）消すボタンでピンを消したいです。
clear_flagのture/falseでstruct MapView内のfunc updateUIView内で消すように考えたのですが、そもそも消すボタンを押してもlocationが更新されないから（？）うまくfunc updateUIViewに飛びません。

そもそも、このような面倒なことをしなくても、なんらかのfunc等を呼べば、マップ内のPin等追加した要素が消せる方法等もあるのでしょうか？

すいません。お知恵を拝借したく、よろしくお願いいたします。

//  ContentView.swift
import SwiftUI
import MapKit
var latetude : Double = 0.0
var longitude : Double = 0.0
var clear_flag = false

struct ContentView: View {

    var body: some View {

        let latetude = $manager.location.wrappedValue.coordinate.latitude
        let longitude = $manager.location.wrappedValue.coordinate.longitude

        Button(action: { //delete
                  clear_flag = true
             })
                 {
                     Image(systemName: "delete")               
        }              
        ZStack(alignment: .bottomTrailing){
                MapView(mapType: .standard,latetude: latetude,longitude: longitude)
                {
                Image(systemName: "map")
                        .resizable()
                        .frame(width: 35.0,height: 35.0, alignment: .leading)
                }
        }
    }
}

//  MapView.swift

import SwiftUI
import MapKit

var runPoint : [[Double]] = [[ ]]

struct MapView: UIViewRepresentable{
    let latetude: Double
    let longitude: Double

    typealias UIViewType = MKMapView

    func makeCoordinator() -> MapViewCoordinator {
        return MapViewCoordinator()
      }
    
    func makeUIView(context: Context) -> MKMapView {
        MKMapView()
      }

    func updateUIView(_ uiView: MKMapView, context: Context) {
      uiView.delegate = context.coordinator
      let pin = MKPointAnnotation()
 
      if clear_flag == true{   
            pin.coordinate.longitude = longitude
            pin.coordinate.latitude = latetude
            uiView.mapView.removeAnnotation(annotation)
      }else{             
            pin.coordinate.longitude = longitude
            pin.coordinate.latitude = latetude
            uiView.addAnnotation(pin)
       }
     
       uiView.region = MKCoordinateRegion(
           center: pin.coordinate,
           latitudinalMeters: 500.0,
           longitudinalMeters:500.0)
    }
}

//  LocationManager.swift

import SwiftUI
import MapKit

class LocationManager: NSObject, ObservableObject, CLLocationManagerDelegate {
    let manager = CLLocationManager()
    @Published var location = CLLocation()

    override init() {
        super.init()
        self.manager.delegate = self
        self.manager.requestWhenInUseAuthorization()
        self.manager.desiredAccuracy = kCLLocationAccuracyBest
        self.manager.distanceFilter = 10
        self.manager.allowsBackgroundLocationUpdates = true
        self.manager.startUpdatingLocation()
    }

    func locationManager(_ manager: CLLocationManager,
                           didUpdateLocations locations: [CLLocation]) {
        if map_start == true{
        self.location = locations.last!
        }
    }
}

Comments

[hoshi-takanori]

「なんらかのfunc等を呼べば、要素が消せる」というのは、UIKit などの伝統的・手続き的な UI の考え方ですね。
SwiftUI は宣言的 UI なので、ピンを消したいということは、まず「ピンを表示している状態」「ピンが表示されてない状態」を @State などで区別できるようにして、それを画面に反映させる、という考え方をする必要があります。

Answer 1

まず、削除したいアノテーション（Pin）をどう取得するかが問題です。

アノテーションをタップして取得する方法もありますが、ここでは追加したものをそのまま削除できれば良いので、アノテーションを追加したタイミングで同時にそのアノテーションの参照を取得できれば最終的にremoveAnnotationで解決できそうです。

では、アノテーションを追加したタイミングでどう取得するか？

MapViewには便利なデリゲートパターンがデフォルトで用意されているのでそれを使います。

NSObjectとMKMapViewDelegateを継承したクラスMapViewCoordinatorをMapView構造体の中に作成する。

// MapView.swift
struct MapView: UIViewRepresentable {
  
  (省略)
  
  class MapViewCoordinator: NSObject, MKMapViewDelegate {
        var parent: MapView
        
        init(_ parent: MapView){
            self.parent = parent
            super.init()
        }
  }
}

次に、アノテーションを追加した時に自動で呼び出されるデリゲートメソッドmapView(_:viewFor:)を定義する。

この中でアノテーションのView（UIAnnotationView）を取得できるので、BindingなどでMapViewの上位のビューであるContentViewと共有しましょう。

// MapView.swift 
struct MapView: UIViewRepresentable {
    @Binding var map: MKMapView
    @Binding var sharedAnnotationView: MKAnnotationView
  
        (省略)

    class MapViewCoordinator: NSObject, MKMapViewDelegate {
  
        (省略)
        
        // アノテーション追加時に呼ばれるメソッド
        func mapView(_ mapView: MKMapView, viewFor annotation: MKAnnotation) -> MKAnnotationView? {
            // MKMarkerAnnotationViewクラスはMKAnnotationViewクラスを継承したクラス。
            // mapView(_:viewFor:)メソッド内で宣言することでピンの見た目を色々カスタマイズできる。
            let annotationView = MKMarkerAnnotationView() 
            // ここでMKAnnotationViewをContentViewと共有する
            self.parent.sharedAnnotationView = annotationView 

            return annotationView
        }
    }
}

あとはContentView側でMKMapView.removeAnnotation()を呼び出せばMapView外の操作でピンを削除することができます。

最終的にコード全体は下記のような感じになります。

（現在地情報の取得を考えると複雑になるので今回は触れていません）

// ContentView.swift

import SwiftUI
import MapKit

struct ContentView: View {
    @State var map = MKMapView()
    @State var sharedAnnotationView = MKAnnotationView()

    var body: some View {
        VStack{
            MapView(map: $map, sharedAnnotationView: $sharedAnnotationView)
            
            // 削除ボタン
            Button(action: {
                map.removeAnnotation(sharedAnnotationView.annotation!)
            }, label: {
                Text("Remove annotation")
            }).frame(height: 100)
            
            // 追加ボタン
            Button(action: {
                let annotation = MKPointAnnotation()
                // アノテーションを追加する座標を指定
                annotation.coordinate = CLLocationCoordinate2D(latitude: 35.3,
                                                               longitude: 139.4)
                // アノテーションのキャプションを指定
                annotation.title = "sample"
                map.addAnnotation(annotation)
            }, label: {
                Text("Add annotation")
            }).frame(height: 100)
        }
    }
}

//  MapView.swift
import SwiftUI
import MapKit

struct MapView: UIViewRepresentable {
    @Binding var map: MKMapView
    @Binding var sharedAnnotationView: MKAnnotationView
    
    func makeUIView(context:Context) -> MKMapView {
        map.delegate = context.coordinator
        return map
    }
    
    func makeCoordinator() -> MapViewCoordinator {
        MapViewCoordinator(self)
    }
    
    func updateUIView(_ uiView: MKMapView, context: Context) {
    }
    
    class MapViewCoordinator: NSObject, MKMapViewDelegate {
        var parent: MapView
        
        init(_ parent: MapView){
            self.parent = parent
            super.init()
        }
        
        // アノテーション追加時に呼ばれるメソッド
        func mapView(_ mapView: MKMapView, viewFor annotation: MKAnnotation) -> MKAnnotationView? {
            // MKMarkerAnnotationViewクラスはMKAnnotationViewクラスを継承したクラス。
            // mapView(_:viewFor:)メソッド内で宣言することでピンの見た目を色々カスタマイズできる。
            let annotationView = MKMarkerAnnotationView() 

            // ここでMKAnnotationViewをContentViewと共有する
            self.parent.sharedAnnotationView = annotationView 

            return annotationView
        }
    }
}

ご参考になれば幸いです。

Comments

[masa328]

詳しい詳細な説明いただき誠にありがとうございます。
返事が個人的な都合により遅くなりまして大変申し訳ございませんでした。

いただいたコード例を試させていただきました。この例ですとpinが一つですが、複数になった場合どうしたらよろしいでしょうか。
試してみたのはいただいたコードの　func updateUIView　に
let annotation = MKPointAnnotation()
annotation.coordinate = CLLocationCoordinate2D(latitude: 38.3, longitude: 139.4)
map.addAnnotation(annotation)
とか行こなったあと、ContentView内のbuttonでもう一つのpinを立てた後、removeボタンを押しても一つしか消えない等です。
要領得ない説明で申し訳ありませんがよろしくお願いします。

[chitomo]

複数同時に消すのであればMapKitのremoveAnnotations(_:)メソッドにMKAnnotation型の配列を引数として渡してあげればまとめて消すことができます。
https://developer.apple.com/documentation/mapkit/mkmapview/1452130-removeannotations

この場合、BindingするsharedAnnotationViewもMKAnnotation型の配列（[MKAnnotation]）にしてあげて、
func mapView(_ mapView: MKMapView, viewFor annotation: MKAnnotation) -> MKAnnotationView? {...}
内の
self.parent.sharedAnnotationView = annotationView
は
self.parent.sharedAnnotationView.append(annotationView)
のようにすれば良いかと思います。

[masa328]

早々にありがとうございます。
MapView内の
@Binding var sharedAnnotationView: [MKAnnotationView]
self.parent.sharedAnnotationView.append(annotationView)
に変更
ContentView内で
@State var sharedAnnotationView = [MKAnnotationView()]
にしましたが
map.removeAnnotations([sharedAnnotationView.annotation!])
のところでエラーが出てしまいます。（Annotationはsをつけました）
どう考えばいいでしょうか。
それと、追加で申し訳ないのですが、pinではなくpolylineの場合は全体的にどう考えればいいのでしょうか？

[chitomo]

.removeAnnotationsの引数にはMKAnnotation型のArrayが指定されているので、Bindingするプロパティの型は[MKAnnotationView]ではなく[MKAnnotation]にした方がやりやすいと思います。
なのでMapViewで宣言すべきは
@Binding var sharedAnnotationView: [MKAnnotation]
となります。

各ピンのMKAnnotationはfunc mapView(_ mapView: MKMapView, viewFor annotation: MKAnnotation)の中で取得することができるので、
self.parent.sharedAnnotationView.append(annotation)
としてあげて、最後にContentViewで
map.removeAnnotations(sharedAnnotationArray)
を入れてあげると複数のピンをまとめて削除することができるはずです。

あと、polylineの場合はaddOverlayメソッドを使って描写するやり方を使ってますかね？
その場合も考え方としては同じで、removeOverlayメソッドに同じくpolylineを渡してあげれば済む話だと思います。
https://developer.apple.com/documentation/mapkit/mkmapview/1451921-removeoverlay

[masa328]

お付き合いいただきありがとうございます。
map.removeAnnotations(sharedAnnotationArray)
ですが、「Cannot find 'sharedAnnotationArray' in scope」エラーが出てしまいます。
ContentView.swiftには
@State var sharedAnnotationView = [MKAnnotationView()]
MapView(map: $map, sharedAnnotation: sharedAnnotationView)
等を書き換えたのですが、何か間違っていますでしょうか

[chitomo]

失礼、間違えました。

map.removeAnnotations(sharedAnnotationArray)
ではなく
map.removeAnnotations(sharedAnnotationView)
です。

[masa328]

すいません。一度そう思って
map.removeAnnotations(sharedAnnotationView)
にしてみたのですが、そうすると
MapView(map: $map, sharedAnnotation: sharedAnnotationView) が
「Cannot convert value of type '[MKAnnotationView]' to expected argument type 'Binding<[MKAnnotation]>'」エラー
map.removeAnnotations(sharedAnnotationView)　が
「Cannot convert value of type '[MKAnnotationView]' to expected argument type '[MKAnnotation]'」エラーが出てしまいます。
MapView(map: $map, sharedAnnotation: sharedAnnotationArray) に書き換えると
「Cannot find 'sharedAnnotationArray' in scope」が出ますが、
map.removeAnnotations(sharedAnnotationView)　のエラーは消えます。
他のところで勘違いしているのでしょうか

[chitomo]

機械翻訳使ってでも良いので、エラー文を読めるようになることをお勧めします。

「Cannot convert value of type '[MKAnnotationView]' to expected argument type 'Binding<[MKAnnotation]>'」は「'[MKAnnotationView]' 型は 'Binding<[MKAnnotation]>' 型に変換できません」という意味です。
ここではMapViewの第二引数に 'Binding<[MKAnnotation]>' 型の変数を指定しなければならないため、ContentViewの変数宣言部で
@State var sharedAnnotationView: [MKAnnotation] = []
と宣言し、MapViewを呼び出す箇所では
MapView(map: $map, sharedAnnotation: $sharedAnnotationView)
とバインディングしてあげれば良いはずです。

また、「map.removeAnnotations(sharedAnnotationView)」で「Cannot convert value of type '[MKAnnotationView]' to expected argument type '[MKAnnotation]'」のエラーが出るのはsharedAnnotationViewのプロパティ宣言時に[MKAnnotation]型ではなく[MKAnnotationView]型で宣言しているからなので、上記のように[MKAnnotation]型で宣言しなおせばこちらもエラーは出なくなるかと思います。

[masa328]

chitomoさん
対応いただきまして誠にありがとうございました。
お陰様でchitomoさんのサンプルで複数PINの削除が可能になりました。
この後、自分のコードで試してみます。

[chitomo]

吉報、ありがとうございます。
無事にmasa328さんのコードでも実装できることを祈願いたします！

[masa328]

chitomoさん、すいません。もう一点教えていただけますか。申し訳ございません。

polylineを同様に操作しようと思って
map.removeOverlays(sharedOverlayView)
を使おうと思っています。

その中で
class MapViewCoordinator: NSObject, MKMapViewDelegate {}
内の
func mapView(_ mapView: MKMapView, viewFor overlay: MKOverlay) -> MKAnnotationView? {
let overlayView = MKMarkerAnnotationView()
self.parent.sharedOverlayView.append(overlay)
return overlayView
}
に書き換えようとしているのですが、ここで
MKAnnotationView　や
MKMarkerAnnotationView()　を
何に書き換えたらいいかわかりません。
そもそも viewFor を　MKOverlay に対して使えるのかもよくわからないでいます。

お手すきの時でいいのでアドバイスいただけますでしょうか。よろしくお願いいたします。

[masa328]

poly lineに関しては改めて、質問させていだだきました。
本件の質問に関しては解決しています。ありがとうございました。