mapViewの中心にピンを表示させたい

Question

前提・実現したいこと

MapKitで地図アプリを開発しています。そこで地図にピンを刺したいのですが、
タップなどでピンを刺すのではなく、常に地図の中心にピンが表示されていてピンを刺したいところに地図の中心を合わせることでピンを刺したいです。
もしそのような機能がMapKitに存在するのであれば、教えてくださると大変助かります。

イメージとしては、下の画像のようにピンが表示されている状況で地図を移動させ、ピンを指す場所を選択する感じです。

試したこと

ピンの画像をネットから取ってきて、表示する方法も考えましたが不自然なUIになりやめました。

Comments

[TsukubaDepot]

常に地図（に相当するView）の中心にピン（のような画像）を表示する、という方法では何らかの不都合があるのでしょうか。
「不自然なUI」とあるので、なんらかの不都合があるのかと思いますが、それも詳しく書いていただいた方がより良い回答が得られるようにおもめます。

[Raleigh]

すいません。質問が適切ではなかったです。求めていた画像が探してもなかったことと、ピンの指すところと地図の中心を合わせることが難しそうという理由で、楽をしようとMapKitにそのような機能がないか安易に質問をしてしまいました。やはりMapKitにそのような機能はなさそうなので、画像を表示する方向で頑張ろうと思います。ありがとうございます。

[TsukubaDepot]

いや、直接的な機能はありませんが、おそらく実現できそうな方法はあります。
MKMapView の delegate と、GestureRecoqnizer を併用する方法です。

[Raleigh]

GestureRecoqnizerというのは詳しい使い方はわからないのですが、
一度指したピンをスワイプで移動させるといった感じでしょうか？

Answer 1

考えていいらっしゃる方法がこのような方法かわかりませんが、ドラッグに合わせてピンも移動します。

GestureRecognizer を併用せず、MapKit の delegate だけだと、移動完了後しかピンが移動しません。

ただし、現状の実装だとドラッグ時にジッタが発生し、多少見苦しいので、その辺りはぜひ質問者さんでうまい方法を考えていただければと思います。

import UIKit
import MapKit

// UIGestureRecognizerDelegate に準拠させる
class ViewController: UIViewController, MKMapViewDelegate, UIGestureRecognizerDelegate {
    @IBOutlet weak var mapView: MKMapView!
  
    var annotationCoordinate = MKPointAnnotation()

    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view.
        
        mapView.delegate = self
        
        // mapView に gestureRecognizer を追加する
        let gesture = UIPanGestureRecognizer(target: self, action: #selector(receiveGesture(_:)))
        gesture.delegate = self
        mapView.addGestureRecognizer(gesture)

        // 緯度・経度を設定
        let location = CLLocationCoordinate2DMake(35.68154,139.752498)
        mapView.setCenter(location, animated:true)
        
        // 初期のアノテーション
        annotationCoordinate.coordinate = location
        mapView.addAnnotation(annotationCoordinate)
        
        // 縮尺を設定
        var region = mapView.region
        region.center = location
        region.span.latitudeDelta = 0.02
        region.span.longitudeDelta = 0.02
        
        mapView.setRegion(region,animated:true)
        mapView.mapType = .standard
    }
    
    // delegate: 複数の GestureRecognizer を有効にする
    func gestureRecognizer(_ gestureRecognizer: UIGestureRecognizer, shouldRecognizeSimultaneouslyWith otherGestureRecognizer: UIGestureRecognizer) -> Bool {
        return true
    }
    
    @objc func receiveGesture(_ gestureRecognizer : UIPanGestureRecognizer) {
        print(#function)
        if let mapView = gestureRecognizer.view as? MKMapView {
            moveAnnotation(mapView)
        }
    }
    
    func moveAnnotation(_ mapView: MKMapView) {
        // 地図の中央座標
        annotationCoordinate.coordinate = mapView.centerCoordinate
    }
    
    // delegate: ドラッグ終了
    func mapView(_ mapView: MKMapView, regionDidChangeAnimated animated: Bool) {
        print(#function)
        moveAnnotation(mapView)
    }
    
    // delegate: ドラッグ開始
    func mapView(_ mapView: MKMapView, regionWillChangeAnimated animated: Bool) {
        print(#function)
    }
}

##任意の View を表示させる方法

import UIKit
import MapKit

// UIGestureRecognizerDelegate に準拠させる
class ViewController: UIViewController, MKMapViewDelegate, UIGestureRecognizerDelegate {
    @IBOutlet weak var mapView: MKMapView!
  
    var annotationCoordinate = MKPointAnnotation()

    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view.
        
        mapView.delegate = self
        
        // mapView に gestureRecognizer を追加する
        let gesture = UIPanGestureRecognizer(target: self, action: #selector(receiveGesture(_:)))
        gesture.delegate = self
        mapView.addGestureRecognizer(gesture)

        // 緯度・経度を設定
        let location = CLLocationCoordinate2DMake(35.68154,139.752498)
        mapView.setCenter(location, animated:true)
        
        // 初期のアノテーション
        annotationCoordinate.coordinate = location
        mapView.addAnnotation(annotationCoordinate)
        
        // 縮尺を設定
        var region = mapView.region
        region.center = location
        region.span.latitudeDelta = 0.02
        region.span.longitudeDelta = 0.02
        
        mapView.setRegion(region,animated:true)
        mapView.mapType = .standard
        
        // アニメーションを使うなら
        // 縦横20ピクセルの視覚を用意する
        let squareView = UIView(frame: .init(x: 0, y: 0, width: 20, height: 20))
        squareView.layer.borderWidth = 2
        squareView.layer.borderColor = UIColor.red.cgColor
        
        // 点滅処理
        UIView.animateKeyframes(withDuration: 0.5, delay: 0.0, options: [.autoreverse, .repeat]) {
            squareView.alpha = 0.0
        } completion: { _ in
        }

        // mapView の region.center として設定されている CGPoint を取得して、squareView の中心にする
        squareView.center = mapView.convert(mapView.region.center, toPointTo: mapView)
        mapView.addSubview(squareView)
    }
    
    // delegate: 複数の GestureRecognizer を有効にする
    func gestureRecognizer(_ gestureRecognizer: UIGestureRecognizer, shouldRecognizeSimultaneouslyWith otherGestureRecognizer: UIGestureRecognizer) -> Bool {
        return true
    }
    
    @objc func receiveGesture(_ gestureRecognizer : UIPanGestureRecognizer) {
        print(#function)
        if let mapView = gestureRecognizer.view as? MKMapView {
            moveAnnotation(mapView)
        }
    }
    
    func moveAnnotation(_ mapView: MKMapView) {
        // 地図の中央座標
        annotationCoordinate.coordinate = mapView.centerCoordinate
    }
    
    // delegate: ドラッグ終了
    func mapView(_ mapView: MKMapView, regionDidChangeAnimated animated: Bool) {
        print(#function)
        moveAnnotation(mapView)
    }
    
    // delegate: ドラッグ開始
    func mapView(_ mapView: MKMapView, regionWillChangeAnimated animated: Bool) {
        print(#function)
    }
}

Comments

[Raleigh]

回答ありがとうございます！
わざわざ方法を考えてくださってありがとうございます。
画像を表示する方と同時に進めていき、両方とも試していこうと思います！

[TsukubaDepot]

任意の View をMapView の中心（View の中心ではなく、地図座標としての中心）に重ねて表示させる方法も追記しました。