Google Map Marker Clustering(標記叢集)
上圖是 591 租屋網的地圖找房功能，不曉得大家有沒有使用過 ?甚至有沒有想過這個功能是怎麼實現的呢？圖上的圓圈圈其實是當鏡頭拉遠(Zoom Out)到一定的比例時，Marker 會聚集在一起的效果；反之，則又會散開，如果沒辦法想像的，可以上 591 玩弄一下，當然這個功能在蠻多地方也有被使用到的，而這個功能被稱做標記叢集(Marker Clustering)。今天法蘭克就要來跟大家說明，如何使用 Google Map 的標記叢集來達到這個特效。首先，先來看看法蘭克使用 Google Map SDK + Google Map 的工具包 SDK 完成這個功能的樣貌。
是不是有點酷炫？今日的教學分成以下章節。
- 申請 Google Map API key 金鑰。
- 使用 CocoaPods 載入 Google Map + Google Map iOS Utils。
- 利用 Storyboard 加載 Google Map。
- 宣告假設用來存放來自 Server 資料的 Struct、Marker Class、ClusterItem Class。
- 生成 Cluster Manager 並實作 GMUClusterRendererDelegate、GMUClusterManagerDelegate。
申請 Google Map API key 金鑰
使用 CocoaPods 載入 Google Map + Google Map iOS Utils
除了 Google Map SDK 外，另外還得安裝 Google Map Utils，此 Utils 包含了小多的功能。
- Marker clustering — handles the display of a large number of points。
- Marker customization — display custom markers。
- Quadtree data structure — indexes 2D geometry points and performs 2D range queries。
- Geometry libraries — KML and GeoJSON rendering。
- Heatmaps — Heatmap rendering。
這次會用到的只有 Marker clustering。
安裝指令可參考先前的文章，使用 CocoaPods 安裝 Google Map SDK 那段，此處多了 Google-Map-iOS-Utils 別忘了加入。
利用 Storyboard 加載 Google Map
▼在 Storyboard 新增一 UIView，並設定其 Constraints
▼將 UIView 的 Custom Class 設定成 GMSMapView
▼設定 MapView 的 IBOutlet
▼設定 GMSMapView 的 Camera 為台北 101
在 viewDidLoad() 裡加入地圖中心點、比例尺的設定。
宣告假設用來存放來自 Server 資料的 Struct、Marker Class、ClusterItem Class
▼宣告假設用來存放來自 Server 資料的 Struct
此 Struct 存放假設來自 Server 的資料，包含 Marker、Clustering Item 的座標、Maker 的 Title、描述等等。
▼宣告 Marker Class 以用來產生地圖上的標記
▼宣告 ClusterItem Class 以用來產生地圖上叢集項目
▼生成假設來自 Server 的測試資料
▼加入初始化地圖上的 Cluster Item 的 func，並在 viewDidLoad() 呼叫它
生成 Cluster Manager 並實作 GMUClusterRendererDelegate、GMUClusterManagerDelegate。
在實作此兩個方法之前，必須將 mapView(_:didTap marker:) 的 delegate 設成 return false，否則事件會被欄截
▼加入全域變數 clusterManager
▼在 viewDidLoad() 裡加入 Cluster Manager 以用來管理地圖上的 Cluster Item
▼利用 extension 實作 GMUClusterRendererDelegate 和 GMUClusterManagerDelegate
如果您喜歡我的文章，請多按幾下「拍手」給我鼓勵，或是按「follow」讓我持續提供好文章給您。
