Painted levels: being fostered fostered fostered

Tags: “iOS” “MAMapKit” “Gao De” author: 647 Review: QiShare team

Preface:

Some time ago, a custom map was needed in a project. So, we chose to access amap. Based on this custom map practice, summarize some small details on the use of some maps, and plan to land a series of map-related articles. IOS Autonavi SDK application Practice (a) — Introduction and initialization map iOS Autonavi SDK application practice (b) — custom pin AnnotationView iOS Autonavi SDK application practice (c) — custom bubble CalloutView

This article shows you how to make the default simple use of annotations and customize the pin AnnotationView.

AnnotationView (AnnotationView)

AnnotationView is a annotation control on amAP that can be displayed on the Map according to latitude and longitude. Because the default is pin style, AnnotationView is also called a “pin.”

Default style:

Simple use of AnnotationView by default

First, AnnotationView is a UI control in Amap, and each AnnotationView has an Annotation corresponding to it.

So, we need to initialize an Annotation object.

    func initAnnotationData(a) {
        
        let pointAnnotation = MAPointAnnotation()
        pointAnnotation.coordinate = CLLocationCoordinate2D(latitude: 39.98289153831738, longitude: 116.4903445241268)
        pointAnnotation.title = "360 building"
        pointAnnotation.subtitle = Electronic City, Yard 6, Jiuxianqiao Road, Chaoyang District, Beijing
        mapView.addAnnotation(pointAnnotation)
    }
Copy the code

The official recommendation is to call it in the viewDidAppear method.

    override func viewDidAppear(_ animated: Bool) {
        super.viewDidAppear(animated)
        
        initAnnotationData()
    }
Copy the code

Implement < MAMapViewDelegate > the mapView: viewForAnnotation: callback methods. Like UITableView and so on, annotationView has a reuse strategy.

    /** * @brief Generates corresponding views according to anntation. * @param mapView mapView * @param annotation annotation specified * @return generated annotation View */
    func mapView(_ mapView: MAMapView! .viewFor annotation: MAAnnotation!). -> MAAnnotationView! {
        
        if annotation.isKind(of: MAPointAnnotation.self) {
            let pointReuseIndetifier = "pointReuseIndetifier"
            var annotationView: MAPinAnnotationView? = mapView.dequeueReusableAnnotationView(withIdentifier: pointReuseIndetifier) as! MAPinAnnotationView?
            
            if annotationView = = nil {
                annotationView = MAPinAnnotationView(annotation: annotation, reuseIdentifier: pointReuseIndetifier)
            }
            
            annotationView!.canShowCallout = true
            annotationView!.animatesDrop = true
            annotationView!.isDraggable = true
            annotationView!.rightCalloutAccessoryView = UIButton(type: UIButton.ButtonType.detailDisclosure)
            
            return annotationView!
        }
        
        return nil
    }
Copy the code

The effect is shown below:

AnnotationView (AnnotationView)

  • Step 1: First, create a new class that inherits fromMAAnnotationView.

Let’s call it CustomAnnotationVIew.

Rewrite its init method just like you would custom UIView.

override init! (annotation: MAAnnotation! , reuseIdentifier: String!) { super.init(annotation: annotation, reuseIdentifier: reuseIdentifier) // ... self.addSubview(xxxView) }Copy the code

Customize this CustomAnnotationView according to our requirements.

  • Step 2: Modify<MAMapViewDelegate>In themapView:viewForAnnotation:Callback method.

Among all annotation views, there is a special AnnotationView. This is the AnnotationView that shows the current user’s location. The default is a “little blue dot”. So let’s take this little blue dot, and customize this AnnotationView.

So how do we differentiate the little blue dot from the other Annotation Views?

Each AnnotationView corresponds to an Annotation. And the distinguishing mark is looking at the Type of the Annotation.

The name of the type
Anchor point AnnotationView MAUserLocation
Ordinary AnnotationView MAPointAnnotation

Similarly, if we wanted to customize the ordinary AnnotationView, we would modify the AnnotationView generation method under mapoint notation.

    /** * @brief Generates corresponding views according to anntation. * @param mapView mapView * @param annotation annotation specified * @return generated annotation View */
    func mapView(_ mapView: MAMapView! .viewFor annotation: MAAnnotation!). -> MAAnnotationView! {
        
        // Change the Annotation of the user's location
        if annotation.isKind(of: MAUserLocation.self) {

            userAnnotationView = CustomAnnotationView(annotation: annotation, reuseIdentifier: "UserLocationId") as CustomAnnotationView
            userAnnotationView?.annotation = annotation

            userAnnotationView?.headBoaderColor = .red
            userAnnotationView?.headImage = UIImage.init(named: "QiShare")!
            userAnnotationView?.canShowCallout = false
            userAnnotationView?.tag = userAnnotationViewTag
            userAnnotationView?.zIndex = 360 // Control the annotationView hierarchy, the larger the zIndex value, the higher the annotationView hierarchy
            
            return userAnnotationView!
        }

        // change the AnnotationView for normal annotations
        if annotation.isKind(of: MAPointAnnotation.self) {
            let pointReuseIndetifier = "pointReuseIndetifier"
            var annotationView: MAPinAnnotationView? = mapView.dequeueReusableAnnotationView(withIdentifier: pointReuseIndetifier) as! MAPinAnnotationView?
            
            if annotationView = = nil {
                annotationView = MAPinAnnotationView(annotation: annotation, reuseIdentifier: pointReuseIndetifier)
            }
            
            annotationView!.canShowCallout = true
            annotationView!.animatesDrop = true
            annotationView!.isDraggable = true
            annotationView!.rightCalloutAccessoryView = UIButton(type: UIButton.ButtonType.detailDisclosure)
            
            return annotationView!
        }
        
        return nil
    }
Copy the code

So we’re customizing the AnnotationView for positioning. The effect is shown below:

Finally, for more details, please refer to the official Gauderamap documentation

Recommended articles:

Swift 5.1 (3) – String Write a simple page with Flutter for 5 minutes, Markdown Grammar Swift 5.1(2) – Operator Swift 5.1(1) – Basics Sign In With Apple (a) Weird Dance weekly