Как создать карту с пользовательской аннотацией и фокусом области при прокрутке mapView или касании маркера? - PullRequest
0 голосов
/ 06 февраля 2020

Я хочу реализовать MapKit с UIView, который имеет тот же эффект, что и приложения 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

Мне удалось создать карту Apple с маркерами и UIView, как видно на следующих рисунках по ссылкам ниже: Снимок экрана раскадровки

Снимок экрана симулятора

Однако я хочу, чтобы 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 Ответ

1 голос
/ 06 февраля 2020

вы можете использовать карты Google, установить свои собственные маркеры карты, у него есть все методы, которые вы можете прочитать подробнее здесь https://developers.google.com/maps/documentation/ios-sdk/intro

...