滚动 mapView 或点击标记时，如何创建具有自定义注释和区域焦点的地图？

Posted 2023-02-23

【中文标题】滚动 mapView 或点击标记时，如何创建具有自定义注释和区域焦点的地图？

【英文标题】：How to create a map with custom annotation and region focus when mapView is scrolled or marker is tapped?

【发布时间】：2020-02-06 17:42:16

【问题描述】：

我想实现一个带有 UIView 的 MapKit，它具有与 TripAdvisor 和 ClassPass 应用程序相同的效果。基本上，我想在视图底部添加一个可滚动视图，当用户在地图中滚动时，带有标记信息的底部视图会随着新标记的详细信息而变化。

我想要实现的示例：

https://uigarage.net/maps-on-ios-by-tripadvisor/

ClassPass 应用的第二个示例： https://medium.com/classpass-engineering/creating-a-fluid-scroll-experience-on-ios-faeb29be3bdb

第三个例子，使用 React Native 中的代码： https://codedaily.io/tutorials/9/Build-a-Map-with-Custom-Animated-Markers-and-Region-Focus-when-Content-is-Scrolled-in-React-Native

我能够使用标记和 UIView 创建 Apple 地图，如下图所示： Storyboard's Screenshot

Simulator's Screenshot

但是，我希望根据地图区域或在点击标记时动态更改 UIView。我怎样才能达到这个结果？

这是当前代码：

  @IBOutlet weak var reviewView2: DesignableView!
    @IBOutlet weak var authorLabel: UILabel!


    @IBOutlet weak var reviewLabel: UILabel!


    @IBOutlet weak var Star1: UIImageView!

    @IBOutlet weak var Star2: UIImageView!

    @IBOutlet weak var Star3: UIImageView!

    @IBOutlet weak var Star4: UIImageView!

    @IBOutlet weak var Star5: UIImageView!

    @IBOutlet weak var authorImageView: UIImageView!
    @IBOutlet weak var reviewView: DesignableView!

    var gpxURL: NSURL? 
        didSet 
            clearWaypoints()
             if let url = gpxURL 
                GPX.parse(url: url as URL)  gpx in      // asynchronous
                        if gpx != nil 
                              self.addWayPoints(waypoints: gpx!.waypoints)
                        
                
            
        
    

   let urlstring = "Long_Lat"

    override func viewDidLoad() 
        super.viewDidLoad()
//        gpxURL = URL(string: urlstring)
        gpxURL = Bundle.main.url(forResource: urlstring, withExtension: "gpx") as NSURL?

        reviewView.isHidden = true
        reviewView2.isHidden = true


    

 @IBAction func reviewViewsTapped(_ sender: UITapGestureRecognizer) 
        print("Button tapped")
    




     // MARK: - MKMapViewDelegate

    func mapView(_ mapView: MKMapView, viewFor annotation: MKAnnotation) -> MKAnnotationView? 
     var view = mapView.dequeueReusableAnnotationView(withIdentifier: Constants.AnnotationViewReuseIdentifier)

     if view == nil 
         view = MKPinAnnotationView(annotation: annotation, reuseIdentifier: Constants.AnnotationViewReuseIdentifier)


        else
               view?.annotation = annotation
           

        view?.canShowCallout = false

           guard !annotation.isKind(of: MKUserLocation.self) else 
               //for the custom image on current location
                   view?.image = #imageLiteral(resourceName: "gift")
                   return view
           


        view?.image = UIImage(named: "gift")

        let scaleTransform = CGAffineTransform(scaleX: 0.0, y: 0.0)  // Scale
        UIView.animate(withDuration: 0.2, animations: 
            view?.transform = scaleTransform
            view?.layoutIfNeeded()
        )  (isCompleted) in

            // Nested block of animation
            UIView.animate(withDuration: 0.3, animations: 
                view?.alpha = 1.0
                view?.transform = CGAffineTransform(scaleX: 1.0, y: 1.0)
                AnimationUtility.viewSlideInFromBottom(toTop: view!)
                view?.layoutIfNeeded()
            )
        


     return view
 

知道如何使用 Swift 5 和 UIKit 做到这一点吗？

提前致谢

【参考方案1】：

你可以使用谷歌地图， 设置您的自定义地图标记它具有您可以在此处阅读更多信息的所有方法 https://developers.google.com/maps/documentation/ios-sdk/intro

【讨论】：

我认为完美的例子是 ClassPass，不同的是我想在用户更改地图区域时更改包含用户信息的视图。 ClassPass 使用 MapKit，而不是 Google Map。