標記叢集 介紹說明 程式範例

OA's Marker Clustering!

OA Wu 的個人 Marker Clustering 實作

各位 Google Maps JavaScript API 的玩家都應該有過 Marker 太多時,當 Maps 視角一拉遠時,全部 Marker 擠在一起的困擾吧!沒錯 OA's Marker Clustering 就是要來處理這個困擾!

或許你/妳會問,市面上也有很多關於 Marker Clustering 的 Library,那又何必自己時做一套呢!?原因很簡單,因為自己做的比較能夠掌握概況,視需求去做調整,不用一大包的 code,到底怎麼跑的都摸不透,並且加以利用做出自己想要的功能!

如果試著 Google 關於 Marker Clustering 的文章都會找到 Marker Clustering 此篇,而官網上也都推崇 這套 Library,這套我也開發過,甚至改過其功能,但是最後我還是自己刻了屬於自己的 Marker Clustering 來制定當不同的 集合 Marker 時可以使用不同呈現方式!以下就是一些功能介紹、演算方法說明。

作品分享

取之於網路 • 分享於網路

授權聲明

使用授權 • 責任聲明

概略方法

演算法 • SAMPLE

OA's Marker Clustering 主要規則就是利用 Google Maps 在不同的放大視角(以下以 zoom 代稱)時產生 集合 Marker,而這些 Marker 用來代表著是多數 Marker 集合。如下圖 1 是 zoom 為 16 時的狀況圖,地圖上分別有 A、B 以及 C 三個點,而圖 2 代表在 zoom 為 13 時,因為地圖視角拉遠了,所以造成 A 與 B 互相太靠近,所以必須隱藏 B 只顯示 A,所以作法如圖 3,產生一個 集合 Marker 放置在 A 的位置,並且記錄著數量為 2。

地圖 zoom 為 16 時的狀況圖
圖 1. 地圖 zoom 為 16 時的狀況圖
地圖 zoom 為 13 時 A、B 靠太近
圖 2. 地圖 zoom 為 13 時 A、B 靠太近
因靠太近,故隱藏 B 只顯示 A
圖 3. 因靠太近,故隱藏 B 只顯示 A



功能介紹

FEATURE • LIVE DEMO

這次的 OA's Marker Clustering 中,我拆出兩種 Type,分別是 moveRunrunAll,其兩者在地圖上的呈現結果差不多,但方法是不一樣的。前者 moveRun 是當地圖移動完後(idle Listener),先取得地圖的範圍座標(Bounds),在塞選(filter)出地圖範圍內的座標點,再依照這些座標點去製作各個 集合 Marker。而後者的 runAll 型態則是當一開始新增玩所有點之後,立即運算出當地圖在各個 zoom 分別的 集合 Marker,當地圖 zoom 大小改變時,則可以立即得找出該 zoom 下的 集合 Marker 顯示。

Type moveRun 當地圖移動時,會重新針對範圍內做計算再合併出 集合 Marker,所以會移除舊的在上新的,整體初始速度較快,但當地圖移動時會有閃娑狀況,反之 runAll 因為開始先算出所有不同 zoom 時要顯示的結果,所以當地圖移動(平滑非放大)時,因為不用移除舊的,所以不會有閃爍狀況發生,但初始速度較慢。以下就是兩者不同 type 的 Demo。

Type:moveRun

Type:runAll