Fw: [心得] 實作 Google Maps 的 Marker Clustering

看板Web_Design作者Linux (Windows)時間8年前 (2016/10/05 09:09)推噓5(5推 0噓 0→)

留言5則, 5人參與討論串1/1

※ [本文轉錄自 Soft_Job 看板 #1Nz5App8 ] 作者: Linux (Windows) 看板: Soft_Job 標題: [心得] 實作 Google Maps 的 Marker Clustering 時間: Wed Oct 5 09:09:02 2016 Hi 板上各位大大們早！一早就來發個實作心得文章！最近工作關係，整理一下自己做的 Google Maps 的 Marker Clustering 雖然網路上已經有很多的 Marker Clustering 了，但！就是要自己做才狂！(誤 LIVE DEMO：http://works.ioa.tw/OA-markerClustering/ 各位 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 三個點 http://works.ioa.tw/OA-markerClustering/img/about/01.png

2. 下圖代表在 zoom 為 13 時，因為地圖視角拉遠了，所以造成 A 與 B 互相太靠近所以必須隱藏 B 只顯示 A http://works.ioa.tw/OA-markerClustering/img/about/02.png

3. 所以作法如下圖，產生一個集合 Marker 放置在 A 的位置，並且記錄著數量為 2 http://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 顯示。以上是概略的說明，更多關於程式的應用可以參考： http://works.ioa.tw/OA-markerClustering/sample.html 若是對我的作品有興趣的話，可以參考其他的實作喔！ http://www.ioa.tw/ 大大們若有其他問題、疑問、討論，都可以推文、站內信喔！以上謝謝。 -- -- ※ 發信站: 批踢踢實業坊(ptt.cc), 來自: 36.227.243.32 ※ 文章網址: https://www.ptt.cc/bbs/Soft_Job/M.1475629747.A.CC8.html ※ 發信站: 批踢踢實業坊(ptt.cc) ※ 轉錄者: Linux (36.227.243.32), 10/05/2016 09:09:35