美文网首页QiShare文章汇总iOS 控件定制
iOS 高德SDK应用实践(二)—— 自定义大头针Annotat

iOS 高德SDK应用实践(二)—— 自定义大头针Annotat

作者: QiShare | 来源:发表于2019-09-16 18:34 被阅读0次

    级别:★☆☆☆☆
    标签:「iOS」「MAMapKit」「高德」
    作者: 647
    审校: QiShare团队


    前言:
    前段时间,在一个项目中需要自定义地图。 于是,我们选择了接入了高德地图。
    基于这次自定义地图的实践,总结一些使用上的一些小细节,并计划落地一系列地图相关的文章。
    目录如下:
    iOS 高德SDK应用实践(一)—— 简介与初始化地图
    iOS 高德SDK应用实践(二)—— 自定义大头针AnnotationView
    iOS 高德SDK应用实践(三)—— 自定义气泡CalloutView


    本篇将介绍如何Annotation的默认简单用法,以及自定义大头针AnnotationView。

    一、什么是AnnotationView?

    AnnotationView是高德地图上的标注控件,可以根据经纬度在高德地图上展示的控件。因为默认是大头针样式,所以AnnotationView也被称作为“大头针”。

    默认样式:

    二、默认AnnotationView的简单使用

    首先,AnnotationView是一个高德地图里的UI控件,每一个AnnotationView都会有一个Annotation与之对应。

    因此,我们需要先初始化一个Annotation对象。

        func initAnnotationData() {
            
            let pointAnnotation = MAPointAnnotation()
            pointAnnotation.coordinate = CLLocationCoordinate2D(latitude: 39.98289153831738, longitude: 116.4903445241268)
            pointAnnotation.title = "360大厦"
            pointAnnotation.subtitle = "北京朝阳区酒仙桥路6号院电子城"
            mapView.addAnnotation(pointAnnotation)
        }
    

    官方建议在viewDidAppear方法中调用。

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

    实现<MAMapViewDelegate>中的mapView:viewForAnnotation:回调方法。
    UITableView等类似,annotationView也有复用策略。

        /**
         * @brief 根据anntation生成对应的View。
         * @param mapView 地图View
         * @param annotation 指定的标注
         * @return 生成的标注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
        }
    

    效果如下图:


    三、如何自定义AnnotationView?

    • 第一步:首先,新建一个类,继承与MAAnnotationView
      我们给他个名字CustomAnnotationVIew

    像自定义UIView那样,重写它的init方法。

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

    根据我们的需求,自定义这个CustomAnnotationView

    • 第二步:修改<MAMapViewDelegate>中的mapView:viewForAnnotation:回调方法。

    在所有AnnotationView中,有一个特殊的AnnotationView。它就是用来展示当前用户定位的AnnotationView。默认是个“小蓝点”。
    我们就以这个小蓝点为例,来自定义这个AnnotationView

    那我们如何区分定位小蓝点与其他AnnotationView呢?

    每个AnnotationView对应一个Annotation。而区分的标志就是看AnnotationType

    名称 类型
    定位点AnnotationView MAUserLocation
    普通AnnotationView MAPointAnnotation

    同理,如果我们想自定义普通AnnotationView,就修改MAPointAnnotation下的AnnotationView生成方法。

        /**
         * @brief 根据anntation生成对应的View。
         * @param mapView 地图View
         * @param annotation 指定的标注
         * @return 生成的标注View
         */
        func mapView(_ mapView: MAMapView!, viewFor annotation: MAAnnotation!) -> MAAnnotationView! {
            
            // 改变用户定位的Annotation
            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 // 控制annotationView的层级,zIndex值越大越在上层
                
                return userAnnotationView!
            }
    
            // 改变普通标注的AnnotationView
            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
        }
    

    这样我们就自定义了定位AnnotationView。效果如下图:

    最后,更多详细信息,请参考:高德地图官方文档


    小编微信:可加并拉入《QiShare技术交流群》。

    关注我们的途径有:
    QiShare(简书)
    QiShare(掘金)
    QiShare(知乎)
    QiShare(GitHub)
    QiShare(CocoaChina)
    QiShare(StackOverflow)
    QiShare(微信公众号)

    推荐文章:
    2019苹果秋季新品发布会速览
    申请苹果开发者账号的流程
    Swift 5.1 (3) - 字符串
    用Flutter 写一个简单页面
    5分钟,带你迅速上手Markdown语法
    Swift 5.1 (2) - 运算符
    Swift 5.1(1) - 基础
    Sign In With Apple(一)
    奇舞周刊

    相关文章

      网友评论

        本文标题:iOS 高德SDK应用实践(二)—— 自定义大头针Annotat

        本文链接:https://www.haomeiwen.com/subject/mwdfuctx.html