[心得] 實作 Google Maps 的 Marker Clustering

[Linux (Windows)]

Hi 板上各位大大們早！

一早就來發個實作心得文章！

最近工作關係，整理一下自己做的 Google Maps 的 Marker Clustering

雖然網路上已經有很多的 Marker Clustering 了，但！就是要自己做才狂！(誤



LIVE DEMO：https://works.ioa.tw/OA-markerClustering/index.html



各位 Google Maps JavaScript API 的玩家都應該有遇過當 Marker 太多時

把 Maps 視角一拉遠時，全部 Marker 擠在一起的困擾吧！

沒錯 OA's Marker Clustering 就是要來處理這個困擾！


或許你/妳會問..

網路上也有很多關於 Marker Clustering 的 Library，那又何必自己時做一套呢？

我的原因很簡單，因為自己做的比較能夠掌握概況，視需求去做調整

不用一大包的 code，到底怎麼跑的都摸不透，並且加以利用做出自己想要的功能！



如果試著 Google 關於 Marker Clustering 的文章的話..

都會找到 Marker Clustering 此篇 http://tinyurl.com/zfsqbaf


而官網上也都推崇的這套 Library http://tinyurl.com/pf3yleq

這套我也開發過，甚至改過其功能～



但是最後我還是自己刻了屬於自己的 Marker Clustering

來制定當不同的 集合 Marker 可以使用不同呈現方式！



這套 OA's Marker Clustering

主要規則就是利用 Google Maps 在不同的放大視角(以下以 zoom 代稱)時

產生 集合 Marker，而這些 Marker 用來代表著是多數 Marker 集合

以下分三小以圖文方式說明我的演算方法：


1. 如下圖是 zoom 為 16 時的狀況圖，地圖上分別有 A、B 以及 C 三個點

   https://works.ioa.tw/OA-markerClustering/img/about/01.png


2. 下圖代表在 zoom 為 13 時，因為地圖視角拉遠了，所以造成 A 與 B 互相太靠近

   所以必須隱藏 B 只顯示 A

   https://works.ioa.tw/OA-markerClustering/img/about/02.png


3. 所以作法如下圖，產生一個 集合 Marker 放置在 A 的位置，並且記錄著數量為 2

   https://works.ioa.tw/OA-markerClustering/img/about/03.png



這次的 OA's Marker Clustering 中

我拆出兩種 Type，主要分別是 moveRun、runAll

其兩者在地圖上的呈現結果差不多，但方法是不一樣的。


前者 moveRun 是當地圖移動完後(idle Listener)

先取得地圖的範圍座標(Bounds)，在塞選(filter)出地圖範圍內的座標點

再依照這些座標點去製作各個 集合 Marker。


而後者的 runAll 型態則是當一開始新增玩所有點之後

立即運算出當地圖在各個 zoom 分別的 集合 Marker

當地圖 zoom 大小改變時，則可以立即得找出該 zoom 下的 集合 Marker 顯示。



以上是概略的說明，更多關於程式的應用可以參考：

https://works.ioa.tw/OA-markerClustering/sample.html


若是對我的作品有興趣的話，可以參考其他的實作喔！

https://www.ioa.tw/



大大們若有其他問題、疑問、討論，都可以推文、站內信喔！

以上謝謝。

--

--
※ 發信站: 批踢踢實業坊(ptt.cc), 來自: 36.227.243.32
※ 文章網址: https://www.ptt.cc/bbs/Soft_Job/M.1475629747.A.CC8.html
推 aids61517: 跪著搶頭香
→ Linux: 回 a 大，我正準備出門說，我都還沒到公司ＸＤ
→ robler: 我比較想知道你自己做了一個是因為別人的不好用嗎?
→ robler: 那個你想要別人沒有的功能是什麼阿?
→ y3k: 所以你是Linux還是Windows?XD
推 vn509942:  感謝分享:)
推 yotsuba1022: 謝謝分享
→ Linux: 回 r 大，也不是別人的好不好用的問題，而是自己做一個
→ Linux: 掌握度比較高，可調整性也較多～
→ angusyu: 雖然很佩服你啦，但是時間都浪費掉了
→ TSW: 你的時間複雜度是O(n^2)，可以試著改成O(n)
→ TSW: 另外moveRun跟runAll沒必要拆成兩個方法，可以串在一起
推 silentduke: 學習了 推一下
→ Linux: 回 TSW 我也正為 O(n^2) 煩惱，因為沒時間改ＸＤ
→ Linux: 另外串在一起，我有試過，不過又拆開了..
→ Linux: 寫得有點亂，就乾脆保持原樣ＸＤ
→ TSW: XD
推 heartsky7: 猛
※ 編輯: Linux (114.43.91.221), 11/06/2016 19:50:40