Google Maps 標記叢集 Marker Clustering 各位 Google 地圖 玩家都應該有過當 Marker 太多時,視角一拉遠後全部 Marker 擠在一起的困擾吧!沒錯 OA's Marker Clustering 就是要來處理這個困擾!網路上也有很多關於 Marker Clustering 的 Library,但想要比較能夠掌握概況以及視需求去做調整功能,所以刻了一套可以自訂 Mar…

Google Maps 標記叢集 Marker Clustering

各位 Google 地圖 玩家都應該有過當 Marker 太多時,視角一拉遠後全部 Marker 擠在一起的困擾吧!沒錯 OA's Marker Clustering 就是要來處理這個困擾!網路上也有很多關於 Marker Clustering 的 Library,但想要比較能夠掌握概況以及視需求去做調整功能,所以刻了一套可以自訂 Marker Clustering 的地圖工具。

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

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

概略方法

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 時的狀況圖,地圖上分別有 A、B 以及 C 三個點

地圖視角 zoom 為 13 時,因為視角拉遠所以造成 A 與 B 互相太靠近

因靠太近,故隱藏 B 只顯示 A,產生一個 集合 Marker 放置在 A 的位置,並且記錄著數量為 2

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

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

相關參考

聊天地圖 LiveMaps - OA Wu's Blog
聊天地圖 LiveMaps
聊天地圖 LiveMaps LiveMaps 是一個即時地圖聊天室,讓你在世界上任何位置都可以發出自己的感想動態。每個人都可以在地圖分享著她在世界各地、城市角落的心情寫照,網站藉由 Google 所提供的 Firebase 的 Realtime Database 以及 Google Maps JavaScript API 免費服務實作。 聊天地圖也是一個純前端技術的網站,仰賴 Fireb…
2019 白沙屯媽祖南下進香 GPS 系統 - OA Wu's Blog
2019 白沙屯媽祖南下進香 GPS 系統
2019 白沙屯媽祖南下進香 GPS 系統 因為每年我都會協助幫忙準備這個「白沙屯媽祖南下進香」的活動,所以今年我也在準備著,一年一次,這個專案每年這時候都會啟動,常常有人會問我,不就是把去年的資料庫清空就好了嗎? 不!因為每一年,在我的技術上都是在進步,於是回頭看去年,總會有哪麼一點點不完美的地方,執著的工…
Google Maps 大富翁 - OA Wu's Blog
Google Maps 大富翁
Google Maps 大富翁 這是一個使用 Google Maps JavaScript API 製作的大富翁遊戲!基本上是利用 Google Maps Markers 以及 Polyline 所建置出路線、節點、角色、計分、蓋房... 等設計! 這是一個使用前端 JavaScript、Google Maps 所設計的大富翁遊戲,主要也使用了 jQuery 以及 SCSS 等工具實作,利用 Google Maps Marker…
實作 Instagram Maps 相片地圖 - OA Wu's Blog
實作 Instagram Maps 相片地圖
實作 Instagram Maps 相片地圖 Instagram App 當中有一項很特別的功能是我很喜愛的,就是地圖模式的瀏覽照片,而且 Instagram 將這項功能優化得不錯,使得當地圖縮小時,密集的 Marker 會合成一個 Marker,而這樣的地圖功能在 Google Maps JavaScript API 上可以實作得到! 簡單說,這個專案的目的是利用 Google Mpas 來模…
吳政賢個人簡歷OA WuLiveCoding.tw
OA Wu's Blog
開發心得
Google Maps 標記叢集 Marker Clustering