[心得] 实作 Google Maps 的 Marker Clustering

楼主: Linux (Windows)   2016-10-05 09:09:02
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/
大大们若有其他问题、疑问、讨论,都可以推文、站内信喔!
以上谢谢。
作者: aids61517 (奇欧巴肯)   2016-10-05 09:15:00
跪着抢头香
楼主: Linux (Windows)   2016-10-05 09:15:00
回 a 大,我正准备出门说,我都还没到公司XD
作者: robler (章鱼丸)   2016-10-05 09:21:00
我比较想知道你自己做了一个是因为别人的不好用吗?那个你想要别人没有的功能是什么阿?
作者: y3k (激流を制するは静水)   2016-10-05 09:29:00
所以你是Linux还是Windows?XD
作者: vn509942 (如履薄冰)   2016-10-05 09:35:00
感谢分享:)
作者: yotsuba1022 (Carl)   2016-10-05 09:40:00
谢谢分享
楼主: Linux (Windows)   2016-10-05 10:03:00
回 r 大,也不是别人的好不好用的问题,而是自己做一个掌握度比较高,可调整性也较多~
作者: angusyu (〒△〒)   2016-10-05 12:17:00
虽然很佩服你啦,但是时间都浪费掉了
作者: TSW (翘班帝国)   2016-10-05 13:24:00
你的时间复杂度是O(n^2),可以试着改成O(n)另外moveRun跟runAll没必要拆成两个方法,可以串在一起
作者: silentduke (沉默公爵)   2016-10-05 14:03:00
学习了 推一下
楼主: Linux (Windows)   2016-10-05 14:27:00
回 TSW 我也正为 O(n^2) 烦恼,因为没时间改XD另外串在一起,我有试过,不过又拆开了..写得有点乱,就干脆保持原样XD
作者: TSW (翘班帝国)   2016-10-05 14:28:00
XD
作者: heartsky7 (身寸☆不止)   2016-10-06 20:47:00

Links booklink

Contact Us: admin [ a t ] ucptt.com