Swift 中缩小地图时 MKMapView 未聚类注释
MKMapView not Clustering Annotation on zooming out map in Swift
在重复我的问题之前，请阅读整篇文章。
我在我的应用程序中使用 MkMapKit，现在我必须在缩小地图时显示集群中的人，到目前为止，我已经使用苹果的默认集群 class 从 this answer 中对他们进行编号。现在我不知道如何添加并显示它们所有一个圆圈，我知道它应该与半径相关但我不知道我该怎么做，在下面分享我的代码，我希望有任何帮助赞赏。谢谢
还展示了我所做的事情的图片：
这是我的 UserAnnotationClass
class UserAnnotation: NSObject, MKAnnotation {
let title: String?
let locationName: String
let discipline: String
let coordinate: CLLocationCoordinate2D
let userProfile: UserProfile!
let index: Int!
let memberAnnotations: [UserProfile]!
init(userProfile: UserProfile, at index: Int) {
self.title = userProfile.fullName
self.locationName = (userProfile.locationAddress != nil) ? userProfile.locationAddress : ""
let userProfilePicture: String = (userProfile.profilePicture == nil || userProfile.profilePicture == "") ? "" : userProfile.profilePicture
self.discipline = userProfilePicture
// print("\(userProfile.fullName) \(userProfile.location.dist)")
if (userProfile.isMapVisibility == true) {
self.coordinate = CLLocationCoordinate2D(latitude: userProfile.location.lat, longitude: userProfile.location.lon)
} else {
self.coordinate = CLLocationCoordinate2D(latitude: 0.0, longitude: 0.0)
}
memberAnnotations = [UserProfile]()
memberAnnotations.append(userProfile)
self.userProfile = userProfile
self.index = index
super.init()
}
var subtitle: String? {
return locationName
}
// pinTintColor for disciplines: Sculpture, Plaque, Mural, Monument, other
var markerTintColor: UIColor {
switch discipline {
case "Monument":
return .red
case "Mural":
return .cyan
case "Plaque":
return .blue
case "Sculpture":
return .purple
default:
return .clear
}
}
// Annotation right callout accessory opens this mapItem in Maps app
func mapItem() -> MKMapItem {
let addressDict = [CNPostalAddressStreetKey: subtitle!]
let placemark = MKPlacemark(coordinate: coordinate, addressDictionary: addressDict)
let mapItem = MKMapItem(placemark: placemark)
mapItem.name = title
return mapItem
}
}
这是我用来使它们聚类的 CLusterViewClass。
class ClusterView: MKAnnotationView {
override func hitTest(_ point: CGPoint, with event: UIEvent?) -> UIView? {
let hitView = super.hitTest(point, with: event)
if (hitView != nil)
{
if (hitView?.isKind(of: UIButton.self))! {
let sender: UIButton = hitView as! UIButton
sender.sendActions(for: .touchUpInside)
}
else {
self.superview?.bringSubviewToFront(self)
}
}
return hitView
}
override func point(inside point: CGPoint, with event: UIEvent?) -> Bool {
let rect = self.bounds
var isInside: Bool = rect.contains(point)
if(!isInside)
{
for view in self.subviews
{
isInside = view.frame.contains(point)
if isInside
{
break
}
}
}
return isInside
}
override init(annotation: MKAnnotation?, reuseIdentifier: String?) {
super.init(annotation: annotation, reuseIdentifier: reuseIdentifier)
displayPriority = .defaultHigh
collisionMode = .circle
centerOffset = CGPoint(x: 0, y: -10) // Offset center point to animate better with marker annotations
}
required init?(coder aDecoder: NSCoder) {
fatalError("init(coder:) has not been implemented")
}
override var annotation: MKAnnotation? {
willSet {
canShowCallout = false
if let cluster = newValue as? UserAnnotation {
let renderer = UIGraphicsImageRenderer(size: CGSize(width: 40, height: 40))
let count = cluster.memberAnnotations.count
let uniCount = cluster.memberAnnotations.filter { member -> Bool in
//Log("Bool \(member) , \(member.isMapVisibility == false) ")
return member.isMapVisibility == true
}.count
//Log("COUNTS \(count) , \(uniCount) ❤️")
image = renderer.image { _ in
// Fill full circle with tricycle color
if uniCount > 0 {
AppTheme.blueColor.setFill()
UIBezierPath(ovalIn: CGRect(x: 0, y: 0, width: 40, height: 40)).fill()
// Fill inner circle with white color
UIColor.white.setFill()
UIBezierPath(ovalIn: CGRect(x: 8, y: 8, width: 24, height: 24)).fill()
// Finally draw count text vertically and horizontally centered
let attributes = [ NSAttributedString.Key.foregroundColor: UIColor.black,
NSAttributedString.Key.font: UIFont.boldSystemFont(ofSize: 20)]
//let text = "\(count)"
let text = "4"
let size = text.size(withAttributes: attributes)
let rect = CGRect(x: 20 - size.width / 2, y: 20 - size.height / 2, width: size.width, height: size.height)
text.draw(in: rect, withAttributes: attributes)
}
}
}
}
}
}
这些是我的一些 MapKit 函数
extension FeedsViewController: MKMapViewDelegate {
// 1
func mapView(_ mapView: MKMapView, viewFor annotation: MKAnnotation) -> MKAnnotationView? {
guard let annotation = annotation as? UserAnnotation else { return nil }
// 2
let identifier = "marker"
if #available(iOS 11.0, *) {
var view: ClusterView
if let dequeuedView = mapView.dequeueReusableAnnotationView(withIdentifier: identifier)
as? ClusterView { // 3
dequeuedView.annotation = annotation
view = dequeuedView
} else {
// 4
view = ClusterView(annotation: annotation, reuseIdentifier: identifier)
}
return view
} else {
// Fallback on earlier versions
return nil
}
}
func mapView(_ mapView: MKMapView, regionDidChangeAnimated animated: Bool) {
// let zoomWidth = mapView.visibleMapRect.size.width
// let zoomFactor = Int(log2(zoomWidth))
// print("...REGION DID CHANGE: ZOOM FACTOR \(zoomFactor)")
let centralLocation = CLLocation(latitude: mapView.centerCoordinate.latitude, longitude: mapView.centerCoordinate.longitude)
Log(" Radius - \(self.getRadius(centralLocation: centralLocation))")
}
func getRadius(centralLocation: CLLocation) -> Double{
let topCentralLat:Double = centralLocation.coordinate.latitude - mapView.region.span.latitudeDelta/2
let topCentralLocation = CLLocation(latitude: topCentralLat, longitude: centralLocation.coordinate.longitude)
let radius = centralLocation.distance(from: topCentralLocation)
return radius / 1000.0 // to convert radius to meters
}
func mapView(_ mapView: MKMapView,
didSelect view: MKAnnotationView)
{
// 1
if view.annotation is MKUserLocation
{
// Don't proceed with custom callout
return
}
// 2
let annotation = view.annotation as! UserAnnotation
let detailAnnotationView: UserDetailAnnotationView = UserDetailAnnotationView(frame: CGRect(x: 0, y: 0, width: 320, height: 74))
let url = (annotation.discipline == "") ? nil : URL(string: annotation.discipline)!
let range = 0.0..<0.9
if annotation.userProfile.location.dist != nil {
if range.contains(annotation.userProfile.location.dist) {
let kMeters = Measurement(value: annotation.userProfile.location.dist, unit: UnitLength.kilometers)
let meters = kMeters.converted(to: UnitLength.meters)
detailAnnotationView.distancelbl.text = "\(String(describing: round(Double(meters.value)))) m Away"
} else {
detailAnnotationView.distancelbl.text = "\(String(describing: round(annotation.userProfile.location.dist))) Km Away"
}
}
detailAnnotationView.set(Title: annotation.title!, imageUrl: url) { [weak self] (sender) in
guard let self = self else { return }
if self.isOpenChat {
self.isOpenChat = false
if annotation.userProfile.channel != "" {
self.appDelegate.pubNubAddPushNotifications([annotation.userProfile.channel]) { (status) in
print(status.description)
}
let chatViewController: ChatViewController = self.storyboard?.instantiateViewController(withIdentifier: "ChatViewController") as! ChatViewController
chatViewController.userProfile = annotation.userProfile
chatViewController.loginUserProfile = self.loginUserProfile
self.navigationController?.pushViewController(chatViewController, animated: true)
}
}
}
detailAnnotationView.center = CGPoint(x: view.bounds.size.width / 2, y: -detailAnnotationView.bounds.size.height*0.52)
view.addSubview(detailAnnotationView)
mapView.setCenter((view.annotation?.coordinate)!, animated: true)
// let calloutView = views?[0] as! CustomCalloutView
// calloutView.starbucksName.text = starbucksAnnotation.name
// calloutView.starbucksAddress.text = starbucksAnnotation.address
// calloutView.starbucksPhone.text = starbucksAnnotation.phone
// calloutView.starbucksImage.image = starbucksAnnotation.image
// let button = UIButton(frame: calloutView.starbucksPhone.frame)
// button.addTarget(self, action: #selector(ViewController.callPhoneNumber(sender:)), for: .touchUpInside)
// calloutView.addSubview(button)
// // 3
// calloutView.center = CGPoint(x: view.bounds.size.width / 2, y: -calloutView.bounds.size.height*0.52)
// view.addSubview(calloutView)
// mapView.setCenter((view.annotation?.coordinate)!, animated: true)
}
func mapView(_ mapView: MKMapView, didDeselect view: MKAnnotationView) {
if #available(iOS 11.0, *) {
if view.isKind(of: ClusterView.self)
{
for subview in view.subviews
{
subview.removeFromSuperview()
}
}
} else {
// Fallback on earlier versions
}
}
func mapView(_ mapView: MKMapView, annotationView view: MKAnnotationView,
calloutAccessoryControlTapped control: UIControl) {
// let location = view.annotation as! UserAnnotation
// let launchOptions = [MKLaunchOptionsDirectionsModeKey:
// MKLaunchOptionsDirectionsModeDriving]
// location.mapItem().openInMaps(launchOptions: launchOptions)
}
}
这就是我设置 mapView 的方式....
fileprivate func setupMapsLayout() {
if self.userAnnotationList.count > 0 {
// HereMap
self.mapView.removeAnnotations(self.userAnnotationList)
}
self.mapView.delegate = self
// mapView.register(ArtworkMarkerView.self, forAnnotationViewWithReuseIdentifier: MKMapViewDefaultAnnotationViewReuseIdentifier)
if #available(iOS 11.0, *) {
// HereMap
//self.mapView.register(UserAnnotationView.self, forAnnotationViewWithReuseIdentifier: MKMapViewDefaultAnnotationViewReuseIdentifier)
mapView.register(ClusterView.self, forAnnotationViewWithReuseIdentifier: MKMapViewDefaultClusterAnnotationViewReuseIdentifier)
} else {
// Fallback on earlier versions
}
self.loadInitialData()
self.mapView.addAnnotations(self.userAnnotationList)
//self.mapView.topCenterCoordinate()
}
好的，iOS 11 及更高版本的解决方案相当简单。您有两个注释视图，一个用于您自己的注释，一个用于注释集群。您的主注释视图只需在初始化时指定 clusteringIdentifier 以及 annotation 属性 更改时：
class UserAnnotationView: MKMarkerAnnotationView {
static let preferredClusteringIdentifier = Bundle.main.bundleIdentifier! + ".UserAnnotationView"
override init(annotation: MKAnnotation?, reuseIdentifier: String?) {
super.init(annotation: annotation, reuseIdentifier: reuseIdentifier)
clusteringIdentifier = UserAnnotationView.preferredClusteringIdentifier
collisionMode = .circle
}
required init?(coder aDecoder: NSCoder) {
fatalError("init(coder:) has not been implemented")
}
override var annotation: MKAnnotation? {
willSet {
clusteringIdentifier = UserAnnotationView.preferredClusteringIdentifier
}
}
}
并且您的集群注释视图应该在 annotation 属性 更新时更新其图像：
class UserClusterAnnotationView: MKAnnotationView {
static let preferredClusteringIdentifier = Bundle.main.bundleIdentifier! + ".UserClusterAnnotationView"
override init(annotation: MKAnnotation?, reuseIdentifier: String?) {
super.init(annotation: annotation, reuseIdentifier: reuseIdentifier)
collisionMode = .circle
updateImage()
}
required init?(coder aDecoder: NSCoder) {
fatalError("init(coder:) has not been implemented")
}
override var annotation: MKAnnotation? { didSet { updateImage() } }
private func updateImage() {
if let clusterAnnotation = annotation as? MKClusterAnnotation {
self.image = image(count: clusterAnnotation.memberAnnotations.count)
} else {
self.image = image(count: 1)
}
}
func image(count: Int) -> UIImage {
let bounds = CGRect(origin: .zero, size: CGSize(width: 40, height: 40))
let renderer = UIGraphicsImageRenderer(bounds: bounds)
return renderer.image { _ in
// Fill full circle with tricycle color
AppTheme.blueColor.setFill()
UIBezierPath(ovalIn: bounds).fill()
// Fill inner circle with white color
UIColor.white.setFill()
UIBezierPath(ovalIn: bounds.insetBy(dx: 8, dy: 8)).fill()
// Finally draw count text vertically and horizontally centered
let attributes: [NSAttributedString.Key: Any] = [
.foregroundColor: UIColor.black,
.font: UIFont.boldSystemFont(ofSize: 20)
]
let text = "\(count)"
let size = text.size(withAttributes: attributes)
let origin = CGPoint(x: bounds.midX - size.width / 2, y: bounds.midY - size.height / 2)
let rect = CGRect(origin: origin, size: size)
text.draw(in: rect, withAttributes: attributes)
}
}
}
然后，您所要做的就是注册您的 classes:
mapView.register(UserAnnotationView.self, forAnnotationViewWithReuseIdentifier: MKMapViewDefaultAnnotationViewReuseIdentifier)
mapView.register(UserClusterAnnotationView.self, forAnnotationViewWithReuseIdentifier: MKMapViewDefaultClusterAnnotationViewReuseIdentifier)
不需要（也不需要）mapView(_:viewFor:) 实施。但是上面的结果（在缩小和返回时显示默认动画）：
现在，显然，您可以根据需要修改 UserAnnotationView。 （您的问题没有说明标准的单用户注释视图是什么样的）。但是通过设置它的 clusteringIdentifier 并注册一个 MKMapViewDefaultClusterAnnotationViewReuseIdentifier 你可以很容易地在 iOS 11 和更高版本中获得集群。
如果你真的想让集群注释视图看起来像标准注释视图，你可以为两者注册相同的注释视图class：
mapView.register(UserClusterAnnotationView.self, forAnnotationViewWithReuseIdentifier: MKMapViewDefaultAnnotationViewReuseIdentifier)
mapView.register(UserClusterAnnotationView.self, forAnnotationViewWithReuseIdentifier: MKMapViewDefaultClusterAnnotationViewReuseIdentifier)
但是您必须为集群注释视图提供我们之前为标准注释视图提供的相同 clusteringIdentifier：
class UserClusterAnnotationView: MKAnnotationView {
static let preferredClusteringIdentifier = Bundle.main.bundleIdentifier! + ".UserClusterAnnotationView"
override init(annotation: MKAnnotation?, reuseIdentifier: String?) {
super.init(annotation: annotation, reuseIdentifier: reuseIdentifier)
clusteringIdentifier = UserClusterAnnotationView.preferredClusteringIdentifier
collisionMode = .circle
updateImage()
}
required init?(coder aDecoder: NSCoder) {
fatalError("init(coder:) has not been implemented")
}
override var annotation: MKAnnotation? {
didSet {
clusteringIdentifier = UserClusterAnnotationView.preferredClusteringIdentifier
updateImage()
}
}
private func updateImage() {
if let clusterAnnotation = annotation as? MKClusterAnnotation {
self.image = image(count: clusterAnnotation.memberAnnotations.count)
} else {
self.image = image(count: 1)
}
}
func image(count: Int) -> UIImage {
let bounds = CGRect(origin: .zero, size: CGSize(width: 40, height: 40))
let renderer = UIGraphicsImageRenderer(bounds: bounds)
return renderer.image { _ in
// Fill full circle with tricycle color
AppTheme.blueColor.setFill()
UIBezierPath(ovalIn: bounds).fill()
// Fill inner circle with white color
UIColor.white.setFill()
UIBezierPath(ovalIn: bounds.insetBy(dx: 8, dy: 8)).fill()
// Finally draw count text vertically and horizontally centered
let attributes: [NSAttributedString.Key: Any] = [
.foregroundColor: UIColor.black,
.font: UIFont.boldSystemFont(ofSize: 20)
]
let text = "\(count)"
let size = text.size(withAttributes: attributes)
let origin = CGPoint(x: bounds.midX - size.width / 2, y: bounds.midY - size.height / 2)
let rect = CGRect(origin: origin, size: size)
text.draw(in: rect, withAttributes: attributes)
}
}
}
产生：
就个人而言，我认为这有点令人困惑，但如果这是您想要的，那是实现它的一种方法。
现在，如果你真的需要支持 11 之前的 iOS 版本并且你想要集群，那么你必须自己完成所有这些集群逻辑（或寻找第三方库来完成）。 Apple 在 WWDC 2011 Visualizing Information Geographically with MapKit 中展示了如何做到这一点。他们采用的概念是将可见地图划分为网格，如果在特定网格内有多个注释，他们会删除它们并添加一个“集群”注释。它们还说明了您甚至可以如何以视觉方式动画化注解移入和移出群集，以便用户可以了解在放大和缩小时发生了什么。当您深入研究时，这是一个很好的起点。
这是non-trivial，所以我想了很久我是否想自己实现这个。我要么放弃 11 之前的 iOS 版本，要么找到一个 third-party 实现（question you reference 有很多例子）。
在重复我的问题之前，请阅读整篇文章。 我在我的应用程序中使用 MkMapKit，现在我必须在缩小地图时显示集群中的人，到目前为止，我已经使用苹果的默认集群 class 从 this answer 中对他们进行编号。现在我不知道如何添加并显示它们所有一个圆圈，我知道它应该与半径相关但我不知道我该怎么做，在下面分享我的代码，我希望有任何帮助赞赏。谢谢 还展示了我所做的事情的图片：
这是我的 UserAnnotationClass
class UserAnnotation: NSObject, MKAnnotation {
let title: String?
let locationName: String
let discipline: String
let coordinate: CLLocationCoordinate2D
let userProfile: UserProfile!
let index: Int!
let memberAnnotations: [UserProfile]!
init(userProfile: UserProfile, at index: Int) {
self.title = userProfile.fullName
self.locationName = (userProfile.locationAddress != nil) ? userProfile.locationAddress : ""
let userProfilePicture: String = (userProfile.profilePicture == nil || userProfile.profilePicture == "") ? "" : userProfile.profilePicture
self.discipline = userProfilePicture
// print("\(userProfile.fullName) \(userProfile.location.dist)")
if (userProfile.isMapVisibility == true) {
self.coordinate = CLLocationCoordinate2D(latitude: userProfile.location.lat, longitude: userProfile.location.lon)
} else {
self.coordinate = CLLocationCoordinate2D(latitude: 0.0, longitude: 0.0)
}
memberAnnotations = [UserProfile]()
memberAnnotations.append(userProfile)
self.userProfile = userProfile
self.index = index
super.init()
}
var subtitle: String? {
return locationName
}
// pinTintColor for disciplines: Sculpture, Plaque, Mural, Monument, other
var markerTintColor: UIColor {
switch discipline {
case "Monument":
return .red
case "Mural":
return .cyan
case "Plaque":
return .blue
case "Sculpture":
return .purple
default:
return .clear
}
}
// Annotation right callout accessory opens this mapItem in Maps app
func mapItem() -> MKMapItem {
let addressDict = [CNPostalAddressStreetKey: subtitle!]
let placemark = MKPlacemark(coordinate: coordinate, addressDictionary: addressDict)
let mapItem = MKMapItem(placemark: placemark)
mapItem.name = title
return mapItem
}
}
这是我用来使它们聚类的 CLusterViewClass。
class ClusterView: MKAnnotationView {
override func hitTest(_ point: CGPoint, with event: UIEvent?) -> UIView? {
let hitView = super.hitTest(point, with: event)
if (hitView != nil)
{
if (hitView?.isKind(of: UIButton.self))! {
let sender: UIButton = hitView as! UIButton
sender.sendActions(for: .touchUpInside)
}
else {
self.superview?.bringSubviewToFront(self)
}
}
return hitView
}
override func point(inside point: CGPoint, with event: UIEvent?) -> Bool {
let rect = self.bounds
var isInside: Bool = rect.contains(point)
if(!isInside)
{
for view in self.subviews
{
isInside = view.frame.contains(point)
if isInside
{
break
}
}
}
return isInside
}
override init(annotation: MKAnnotation?, reuseIdentifier: String?) {
super.init(annotation: annotation, reuseIdentifier: reuseIdentifier)
displayPriority = .defaultHigh
collisionMode = .circle
centerOffset = CGPoint(x: 0, y: -10) // Offset center point to animate better with marker annotations
}
required init?(coder aDecoder: NSCoder) {
fatalError("init(coder:) has not been implemented")
}
override var annotation: MKAnnotation? {
willSet {
canShowCallout = false
if let cluster = newValue as? UserAnnotation {
let renderer = UIGraphicsImageRenderer(size: CGSize(width: 40, height: 40))
let count = cluster.memberAnnotations.count
let uniCount = cluster.memberAnnotations.filter { member -> Bool in
//Log("Bool \(member) , \(member.isMapVisibility == false) ")
return member.isMapVisibility == true
}.count
//Log("COUNTS \(count) , \(uniCount) ❤️")
image = renderer.image { _ in
// Fill full circle with tricycle color
if uniCount > 0 {
AppTheme.blueColor.setFill()
UIBezierPath(ovalIn: CGRect(x: 0, y: 0, width: 40, height: 40)).fill()
// Fill inner circle with white color
UIColor.white.setFill()
UIBezierPath(ovalIn: CGRect(x: 8, y: 8, width: 24, height: 24)).fill()
// Finally draw count text vertically and horizontally centered
let attributes = [ NSAttributedString.Key.foregroundColor: UIColor.black,
NSAttributedString.Key.font: UIFont.boldSystemFont(ofSize: 20)]
//let text = "\(count)"
let text = "4"
let size = text.size(withAttributes: attributes)
let rect = CGRect(x: 20 - size.width / 2, y: 20 - size.height / 2, width: size.width, height: size.height)
text.draw(in: rect, withAttributes: attributes)
}
}
}
}
}
}
这些是我的一些 MapKit 函数
extension FeedsViewController: MKMapViewDelegate {
// 1
func mapView(_ mapView: MKMapView, viewFor annotation: MKAnnotation) -> MKAnnotationView? {
guard let annotation = annotation as? UserAnnotation else { return nil }
// 2
let identifier = "marker"
if #available(iOS 11.0, *) {
var view: ClusterView
if let dequeuedView = mapView.dequeueReusableAnnotationView(withIdentifier: identifier)
as? ClusterView { // 3
dequeuedView.annotation = annotation
view = dequeuedView
} else {
// 4
view = ClusterView(annotation: annotation, reuseIdentifier: identifier)
}
return view
} else {
// Fallback on earlier versions
return nil
}
}
func mapView(_ mapView: MKMapView, regionDidChangeAnimated animated: Bool) {
// let zoomWidth = mapView.visibleMapRect.size.width
// let zoomFactor = Int(log2(zoomWidth))
// print("...REGION DID CHANGE: ZOOM FACTOR \(zoomFactor)")
let centralLocation = CLLocation(latitude: mapView.centerCoordinate.latitude, longitude: mapView.centerCoordinate.longitude)
Log(" Radius - \(self.getRadius(centralLocation: centralLocation))")
}
func getRadius(centralLocation: CLLocation) -> Double{
let topCentralLat:Double = centralLocation.coordinate.latitude - mapView.region.span.latitudeDelta/2
let topCentralLocation = CLLocation(latitude: topCentralLat, longitude: centralLocation.coordinate.longitude)
let radius = centralLocation.distance(from: topCentralLocation)
return radius / 1000.0 // to convert radius to meters
}
func mapView(_ mapView: MKMapView,
didSelect view: MKAnnotationView)
{
// 1
if view.annotation is MKUserLocation
{
// Don't proceed with custom callout
return
}
// 2
let annotation = view.annotation as! UserAnnotation
let detailAnnotationView: UserDetailAnnotationView = UserDetailAnnotationView(frame: CGRect(x: 0, y: 0, width: 320, height: 74))
let url = (annotation.discipline == "") ? nil : URL(string: annotation.discipline)!
let range = 0.0..<0.9
if annotation.userProfile.location.dist != nil {
if range.contains(annotation.userProfile.location.dist) {
let kMeters = Measurement(value: annotation.userProfile.location.dist, unit: UnitLength.kilometers)
let meters = kMeters.converted(to: UnitLength.meters)
detailAnnotationView.distancelbl.text = "\(String(describing: round(Double(meters.value)))) m Away"
} else {
detailAnnotationView.distancelbl.text = "\(String(describing: round(annotation.userProfile.location.dist))) Km Away"
}
}
detailAnnotationView.set(Title: annotation.title!, imageUrl: url) { [weak self] (sender) in
guard let self = self else { return }
if self.isOpenChat {
self.isOpenChat = false
if annotation.userProfile.channel != "" {
self.appDelegate.pubNubAddPushNotifications([annotation.userProfile.channel]) { (status) in
print(status.description)
}
let chatViewController: ChatViewController = self.storyboard?.instantiateViewController(withIdentifier: "ChatViewController") as! ChatViewController
chatViewController.userProfile = annotation.userProfile
chatViewController.loginUserProfile = self.loginUserProfile
self.navigationController?.pushViewController(chatViewController, animated: true)
}
}
}
detailAnnotationView.center = CGPoint(x: view.bounds.size.width / 2, y: -detailAnnotationView.bounds.size.height*0.52)
view.addSubview(detailAnnotationView)
mapView.setCenter((view.annotation?.coordinate)!, animated: true)
// let calloutView = views?[0] as! CustomCalloutView
// calloutView.starbucksName.text = starbucksAnnotation.name
// calloutView.starbucksAddress.text = starbucksAnnotation.address
// calloutView.starbucksPhone.text = starbucksAnnotation.phone
// calloutView.starbucksImage.image = starbucksAnnotation.image
// let button = UIButton(frame: calloutView.starbucksPhone.frame)
// button.addTarget(self, action: #selector(ViewController.callPhoneNumber(sender:)), for: .touchUpInside)
// calloutView.addSubview(button)
// // 3
// calloutView.center = CGPoint(x: view.bounds.size.width / 2, y: -calloutView.bounds.size.height*0.52)
// view.addSubview(calloutView)
// mapView.setCenter((view.annotation?.coordinate)!, animated: true)
}
func mapView(_ mapView: MKMapView, didDeselect view: MKAnnotationView) {
if #available(iOS 11.0, *) {
if view.isKind(of: ClusterView.self)
{
for subview in view.subviews
{
subview.removeFromSuperview()
}
}
} else {
// Fallback on earlier versions
}
}
func mapView(_ mapView: MKMapView, annotationView view: MKAnnotationView,
calloutAccessoryControlTapped control: UIControl) {
// let location = view.annotation as! UserAnnotation
// let launchOptions = [MKLaunchOptionsDirectionsModeKey:
// MKLaunchOptionsDirectionsModeDriving]
// location.mapItem().openInMaps(launchOptions: launchOptions)
}
}
这就是我设置 mapView 的方式....
fileprivate func setupMapsLayout() {
if self.userAnnotationList.count > 0 {
// HereMap
self.mapView.removeAnnotations(self.userAnnotationList)
}
self.mapView.delegate = self
// mapView.register(ArtworkMarkerView.self, forAnnotationViewWithReuseIdentifier: MKMapViewDefaultAnnotationViewReuseIdentifier)
if #available(iOS 11.0, *) {
// HereMap
//self.mapView.register(UserAnnotationView.self, forAnnotationViewWithReuseIdentifier: MKMapViewDefaultAnnotationViewReuseIdentifier)
mapView.register(ClusterView.self, forAnnotationViewWithReuseIdentifier: MKMapViewDefaultClusterAnnotationViewReuseIdentifier)
} else {
// Fallback on earlier versions
}
self.loadInitialData()
self.mapView.addAnnotations(self.userAnnotationList)
//self.mapView.topCenterCoordinate()
}
好的，iOS 11 及更高版本的解决方案相当简单。您有两个注释视图，一个用于您自己的注释，一个用于注释集群。您的主注释视图只需在初始化时指定 clusteringIdentifier 以及 annotation 属性 更改时：
class UserAnnotationView: MKMarkerAnnotationView {
static let preferredClusteringIdentifier = Bundle.main.bundleIdentifier! + ".UserAnnotationView"
override init(annotation: MKAnnotation?, reuseIdentifier: String?) {
super.init(annotation: annotation, reuseIdentifier: reuseIdentifier)
clusteringIdentifier = UserAnnotationView.preferredClusteringIdentifier
collisionMode = .circle
}
required init?(coder aDecoder: NSCoder) {
fatalError("init(coder:) has not been implemented")
}
override var annotation: MKAnnotation? {
willSet {
clusteringIdentifier = UserAnnotationView.preferredClusteringIdentifier
}
}
}
并且您的集群注释视图应该在 annotation 属性 更新时更新其图像：
class UserClusterAnnotationView: MKAnnotationView {
static let preferredClusteringIdentifier = Bundle.main.bundleIdentifier! + ".UserClusterAnnotationView"
override init(annotation: MKAnnotation?, reuseIdentifier: String?) {
super.init(annotation: annotation, reuseIdentifier: reuseIdentifier)
collisionMode = .circle
updateImage()
}
required init?(coder aDecoder: NSCoder) {
fatalError("init(coder:) has not been implemented")
}
override var annotation: MKAnnotation? { didSet { updateImage() } }
private func updateImage() {
if let clusterAnnotation = annotation as? MKClusterAnnotation {
self.image = image(count: clusterAnnotation.memberAnnotations.count)
} else {
self.image = image(count: 1)
}
}
func image(count: Int) -> UIImage {
let bounds = CGRect(origin: .zero, size: CGSize(width: 40, height: 40))
let renderer = UIGraphicsImageRenderer(bounds: bounds)
return renderer.image { _ in
// Fill full circle with tricycle color
AppTheme.blueColor.setFill()
UIBezierPath(ovalIn: bounds).fill()
// Fill inner circle with white color
UIColor.white.setFill()
UIBezierPath(ovalIn: bounds.insetBy(dx: 8, dy: 8)).fill()
// Finally draw count text vertically and horizontally centered
let attributes: [NSAttributedString.Key: Any] = [
.foregroundColor: UIColor.black,
.font: UIFont.boldSystemFont(ofSize: 20)
]
let text = "\(count)"
let size = text.size(withAttributes: attributes)
let origin = CGPoint(x: bounds.midX - size.width / 2, y: bounds.midY - size.height / 2)
let rect = CGRect(origin: origin, size: size)
text.draw(in: rect, withAttributes: attributes)
}
}
}
然后，您所要做的就是注册您的 classes:
mapView.register(UserAnnotationView.self, forAnnotationViewWithReuseIdentifier: MKMapViewDefaultAnnotationViewReuseIdentifier)
mapView.register(UserClusterAnnotationView.self, forAnnotationViewWithReuseIdentifier: MKMapViewDefaultClusterAnnotationViewReuseIdentifier)
不需要（也不需要）mapView(_:viewFor:) 实施。但是上面的结果（在缩小和返回时显示默认动画）：
现在，显然，您可以根据需要修改 UserAnnotationView。 （您的问题没有说明标准的单用户注释视图是什么样的）。但是通过设置它的 clusteringIdentifier 并注册一个 MKMapViewDefaultClusterAnnotationViewReuseIdentifier 你可以很容易地在 iOS 11 和更高版本中获得集群。
如果你真的想让集群注释视图看起来像标准注释视图，你可以为两者注册相同的注释视图class：
mapView.register(UserClusterAnnotationView.self, forAnnotationViewWithReuseIdentifier: MKMapViewDefaultAnnotationViewReuseIdentifier)
mapView.register(UserClusterAnnotationView.self, forAnnotationViewWithReuseIdentifier: MKMapViewDefaultClusterAnnotationViewReuseIdentifier)
但是您必须为集群注释视图提供我们之前为标准注释视图提供的相同 clusteringIdentifier：
class UserClusterAnnotationView: MKAnnotationView {
static let preferredClusteringIdentifier = Bundle.main.bundleIdentifier! + ".UserClusterAnnotationView"
override init(annotation: MKAnnotation?, reuseIdentifier: String?) {
super.init(annotation: annotation, reuseIdentifier: reuseIdentifier)
clusteringIdentifier = UserClusterAnnotationView.preferredClusteringIdentifier
collisionMode = .circle
updateImage()
}
required init?(coder aDecoder: NSCoder) {
fatalError("init(coder:) has not been implemented")
}
override var annotation: MKAnnotation? {
didSet {
clusteringIdentifier = UserClusterAnnotationView.preferredClusteringIdentifier
updateImage()
}
}
private func updateImage() {
if let clusterAnnotation = annotation as? MKClusterAnnotation {
self.image = image(count: clusterAnnotation.memberAnnotations.count)
} else {
self.image = image(count: 1)
}
}
func image(count: Int) -> UIImage {
let bounds = CGRect(origin: .zero, size: CGSize(width: 40, height: 40))
let renderer = UIGraphicsImageRenderer(bounds: bounds)
return renderer.image { _ in
// Fill full circle with tricycle color
AppTheme.blueColor.setFill()
UIBezierPath(ovalIn: bounds).fill()
// Fill inner circle with white color
UIColor.white.setFill()
UIBezierPath(ovalIn: bounds.insetBy(dx: 8, dy: 8)).fill()
// Finally draw count text vertically and horizontally centered
let attributes: [NSAttributedString.Key: Any] = [
.foregroundColor: UIColor.black,
.font: UIFont.boldSystemFont(ofSize: 20)
]
let text = "\(count)"
let size = text.size(withAttributes: attributes)
let origin = CGPoint(x: bounds.midX - size.width / 2, y: bounds.midY - size.height / 2)
let rect = CGRect(origin: origin, size: size)
text.draw(in: rect, withAttributes: attributes)
}
}
}
产生：
就个人而言，我认为这有点令人困惑，但如果这是您想要的，那是实现它的一种方法。
现在，如果你真的需要支持 11 之前的 iOS 版本并且你想要集群，那么你必须自己完成所有这些集群逻辑（或寻找第三方库来完成）。 Apple 在 WWDC 2011 Visualizing Information Geographically with MapKit 中展示了如何做到这一点。他们采用的概念是将可见地图划分为网格，如果在特定网格内有多个注释，他们会删除它们并添加一个“集群”注释。它们还说明了您甚至可以如何以视觉方式动画化注解移入和移出群集，以便用户可以了解在放大和缩小时发生了什么。当您深入研究时，这是一个很好的起点。
这是non-trivial，所以我想了很久我是否想自己实现这个。我要么放弃 11 之前的 iOS 版本，要么找到一个 third-party 实现（question you reference 有很多例子）。