此文讲的是使用高德地图自定义气泡，并且点击自定义气泡后对应的 MAMapView 地图对象能够接收到点击的通知事件 didAnnotationViewCalloutTapped，气泡也在点击后被移除。
效果：
自定义气泡.gif
添加自定义气泡
-
定义弹出的气泡视图对象：
import UIKit // MARK: - 外部接口 extension XQStationCalloutView { /// 设置场站数据 /// /// - parameter station: 场站模型 public func setStation(station: XQStationModel) { textLabel.text = station.name distanceLabel.text = "\(station.distance)km" } } // MARK: - 事件响应 extension XQStationCalloutView { } public class XQStationCalloutView: UIButton { // MARK: - 生命周期 public required init?(coder aDecoder: NSCoder) { super.init(coder: aDecoder) setupParameter() setupUI() layoutPageSubviews() } public override init(frame: CGRect) { super.init(frame: frame) setupParameter() setupUI() layoutPageSubviews() } // MARK: - 界面初始化 /// 初始化参数 public func setupParameter() { } /// 初始化UI public func setupUI() { distanceLabel.text = "1.54km" navigationItem.addSubview(distanceLabel) textLabel.text = "深圳宝安区华美在要在要在要在要" contentItem.addSubview(textLabel) addSubview(navigationItem) addSubview(contentItem) addSubview(entryItem) } /// 初始化布局 public func layoutPageSubviews() { distanceLabel.snp.makeConstraints { (make) in make.centerX.equalToSuperview() make.bottom.equalToSuperview().offset(-14) } textLabel.snp.makeConstraints { (make) in make.left.equalToSuperview().offset(8) make.right.equalToSuperview().offset(-12) make.bottom.equalTo(self.snp.centerY).offset(-3) } navigationItem.snp.makeConstraints { (make) in make.left.centerY.equalToSuperview() } entryItem.snp.makeConstraints { (make) in make.centerY.right.equalToSuperview() } contentItem.snp.makeConstraints { (make) in make.centerY.equalToSuperview() make.left.equalTo(navigationItem.snp.right) make.right.equalTo(entryItem.snp.left) } } // MARK: - 内部接口 // MARK: - 公共成员变量 // MARK: - 私有成员变量 // MARK: - 子控件 /// 左侧导航图标 fileprivate let navigationItem = UIImageView(image: UIImage(named: "icon_info_btn1")) /// 中间内容图标 fileprivate let contentItem = UIImageView(image: UIImage(named: "icon_info_btn2")) /// 右侧箭头图标 fileprivate let entryItem = UIImageView(image: UIImage(named: "icon_info_btn3")) /// 距离文本标签 fileprivate let distanceLabel: UILabel = { let label = UILabel() label.textColor = .white label.font = UIFont.boldSystemFont(ofSize: 10) return label }() /// 场站名称文本标签 fileprivate let textLabel: UILabel = { let label = UILabel() label.textColor = UIColor(hex: "#1f97b7") label.font = UIFont.boldSystemFont(ofSize: 14) return label }() } -
定义弹出自定义气泡的标注视图对象：
-
上面将气泡定义为
UIButton，但是点击后并无法正常地调用响应函数：这是因为自定义的气泡是添加到大头针上的，而大头针的
size只有下面很小一部分，所以按钮是在大头针的外面的，而iOS按钮超过父视图范围是无法响应事件的处理方法。可以通过重写标注视图类的hitTest函数来修复这问题：
/// 因为添加的气泡是在标注视图范围之外，所以重写点击测试，让按钮的点击事件能够得到响应 public override func hitTest(_ point: CGPoint, with event: UIEvent?) -> UIView? { if let view = super.hitTest(point, with: event) { return view } guard let calloutView = calloutView else { return nil } let local = calloutView.convert(point, from: self) return calloutView.bounds.contains(local) ? calloutView : nil }-
通过上面重写
hitTest修复气泡的点击问题，但这时即使点击了气泡MAMapView对象也无法调用相应的代理方法：可以将
MAMapView对象传给标注类，在按钮的点击事件中调用对应的代理方法：/// 气泡点击处理 public func calloutClickHandle() { // 获取当前地图控件 guard let mapView = mapView else { return } // 调用地图控件气泡的点击事件回调处理 mapView.delegate.mapView?(mapView, didAnnotationViewCalloutTapped: self) } -
继续添加气泡的点击移除功能，如果只是调用气泡视图的
removeFromSuperview方法，这样可以将气泡移除，但下次再点击该标注时则无法弹出气泡：因为
MAMapView仍然以为该标注已经被选中了，所以在移除气泡的同时告诉MAMapView取消该标注的选中状态：/// 气泡点击处理 public func calloutClickHandle() { // 获取当前地图控件，并判断当前是否有选中的标注 guard let mapView = mapView, mapView.selectedAnnotations.count > 0 else { return } // 获取当前选中标注对象模型 MAAnnotation let annotation = mapView.selectedAnnotations[0] as? MAAnnotation // 取消选中的标注对象的选中状态，这个接口内部会调用 setSelected 方法 mapView.deselectAnnotation(annotation, animated: false) // 调用地图控件气泡的点击事件回调处理 mapView.delegate.mapView?(mapView, didAnnotationViewCalloutTapped: self) }
-
以下为标注视图的完整代码：
import UIKit
// MARK: - 外部接口
extension XQPointAnnotationView {
}
// MARK: - 事件响应
extension XQPointAnnotationView {
/// 气泡点击处理
public func calloutClickHandle() {
// 获取当前地图控件，并判断当前是否有选中的标注
guard let mapView = mapView, mapView.selectedAnnotations.count > 0 else { return }
// 获取当前选中标注对象模型 MAAnnotation
let annotation = mapView.selectedAnnotations[0] as? MAAnnotation
// 取消选中的标注对象的选中状态
mapView.deselectAnnotation(annotation, animated: false)
// 调用地图控件气泡的点击事件回调处理
mapView.delegate.mapView?(mapView, didAnnotationViewCalloutTapped: self)
}
}
/// 自定义标注图
public class XQPointAnnotationView: MAAnnotationView {
/// 标注所在地图对象,用来当点击自定义气泡后回调相应的代理
public var mapView: MAMapView?
/// 自定义的气泡视图
fileprivate var calloutView: XQStationCalloutView?
public required init?(coder aDecoder: NSCoder) {
super.init(coder: aDecoder)
canShowCallout = false
}
public override init!(annotation: MAAnnotation!, reuseIdentifier: String!) {
super.init(annotation: annotation, reuseIdentifier: reuseIdentifier)
canShowCallout = false
}
public override func setSelected(_ selected: Bool, animated: Bool) {
guard self.isSelected != selected else { return }
if selected {
calloutView = XQStationCalloutView(frame: CGRect(x: 0, y: 0, width: 230, height: 60))
calloutView!.center = CGPoint(x: bounds.midX + 8, y: -bounds.midY - 8)
calloutView!.addTarget(self, action: #selector(self.calloutClickHandle), for: .touchUpInside)
addSubview(calloutView!)
} else {
removeCalloutView()
}
super.setSelected(selected, animated: animated)
}
/// 因为添加的气泡是在标注视图范围之外，所以重写点击测试，让按钮的点击事件能够得到响应
public override func hitTest(_ point: CGPoint, with event: UIEvent?) -> UIView? {
if let view = super.hitTest(point, with: event) {
return view
}
guard let calloutView = calloutView else {
return nil
}
let local = calloutView.convert(point, from: self)
return calloutView.bounds.contains(local) ? calloutView : nil
}
/// 移除自定义气泡
fileprivate func removeCalloutView() {
calloutView?.removeFromSuperview()
calloutView = nil
}
}