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


本篇将介绍CalloutView的默许简略用法,以及怎么自定义气泡CalloutView

一、什么是气泡CalloutView?

CalloutView(气泡)是高德地图AnnotationView(大头针)上的一个控件,它的存在建立在AnnotationView之上,当选择某个AnnotationView时,就会弹出一个CalloutView(气泡)。

体系默许款式如下:

iOS 高德SDK应用实践(三)—— 自定义气泡CalloutView

二、默许CalloutView的简略运用

如果项目的自定义程度不高,直接初始化体系的calloutView运用即可。

<MAMapViewDelegate>中的mapView:viewForAnnotation:回调办法中,把annotationView!.canShowCallout = true,一起可以装备一些callout特点。

        // 改变一般标注的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!
        }

三、怎么添加自定义气泡CalloutView?

  • 第一步:首要,需求在<MAMapViewDelegate>中的mapView:viewForAnnotation:回调办法中,把体系calloutView封闭。
xxxAnnotationView?.canShowCallout = false
  • 第二步:其次,新建一个CustomCalloutView,承继于UIView。 根据自己的需求,进行自定义UI视图。
import UIKit
class CustomCalloutView: UIView {
    var leftBtn: UIButton!
    var rightBtn: UIButton!
    var leftBtnBlock : ((_:UIButton?)->Void)? // 左面按钮的回调
    var rightBtnBlock : ((_:UIButton?)->Void)? // 右边按钮的回调
    override init(frame: CGRect) {
        super.init(frame: frame)
        self.backgroundColor = .white
        self.layer.cornerRadius = self.frame.size.height / 2
        self.layer.masksToBounds = true
        leftBtn = UIButton(type: .custom)
        leftBtn.frame = CGRect(x: 0, y: 0, width: 45.0, height: 45.0)
        leftBtn.setImage(UIImage(named: "QiShare"), for: .normal)
        leftBtn.addTarget(self, action: #selector(leftBtnClicked(button:)), for: UIControl.Event.touchUpInside)
        self.addSubview(leftBtn)
        rightBtn = UIButton(type: .custom)
        rightBtn.frame = CGRect(x: self.frame.size.width - 45.0, y: 0, width: 45.0, height: 45.0)
        rightBtn.setImage(UIImage(named: "QiShare"), for: .normal)
        rightBtn.addTarget(self, action: #selector(rightBtnClicked(button:)), for: UIControl.Event.touchUpInside)
        self.addSubview(rightBtn)
    }
    required init?(coder aDecoder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }
    @objc func leftBtnClicked(button: UIButton) {
        print("left button clicked")
        if leftBtnBlock != nil {
            leftBtnBlock!(button)
        }
    }
    @objc func rightBtnClicked(button: UIButton) {
        print("right button clicked")
        if rightBtnBlock != nil {
            rightBtnBlock!(button)
        }
    }
}
  • 第三步:重写CustomAnnotationView里的setSelected办法。
    override func setSelected(_ selected: Bool, animated: Bool) {
        if self.isSelected == selected{
            return;
        }
        if selected {
            if calloutView == nil {
                calloutView = CustomCalloutView.init(frame: CGRect.init(x: 0, y: 0, width: 100, height: 45))
                calloutView!.center = CGPoint.init(x: bounds.width/2 + calloutOffset.x, y: -calloutView!.bounds.height/2 + calloutOffset.y)
                calloutView?.leftBtnBlock = leftBtnBlock
                calloutView?.rightBtnBlock = rightBtnBlock
            }
            addSubview(calloutView!)
        } else {
            calloutView!.removeFromSuperview()
        }
        super.setSelected(selected, animated: animated)
    }

留意:这时,会发现一个问题。CalloutView虽然能显现,可是CalloutView上的点击事情并不会呼应。

原因如下:

  • CalloutViewsuperViewAnnotationView。 而CalloutViewframeAnnotationViewframe之外。 根据iOS 事情呼应链的准则:超过父视图frame的子视图无法呼应事情, 因而,无法呼应CalloutView上的点击事情。

解决方案,如下:

  • 第四步:重写AnnotationViewhitTest办法。 在AnnotationViewhitTest办法中,添加上CalloutView按钮的呼应区域。 然后,扩展AnnotationView事情呼应的规模。
    override func hitTest(_ point: CGPoint, with event: UIEvent?) -> UIView? {
        var view = super.hitTest(point, with: event)
        if view == nil {
            if self.calloutView == nil {
                return view
            }
            let temPoint1: CGPoint = (self.calloutView?.leftBtn.convert(point, from: self))!
            let temPoint2: CGPoint = (self.calloutView?.rightBtn.convert(point, from: self))!
            if (self.calloutView?.leftBtn.bounds.contains(temPoint1))! {
                view = self.calloutView!.leftBtn
            }
            if (self.calloutView?.rightBtn.bounds.contains(temPoint2))! {
                view = self.calloutView!.rightBtn
            }
        }
        return view
    }

最终,作用如图:

iOS 高德SDK应用实践(三)—— 自定义气泡CalloutView

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