※ [本文转录自 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://webptt.com/cn.aspx?n=bbs/Soft_Job/M.1475629747.A.CC8.html

※ 发信站: 批踢踢实业坊(ptt.cc) ※ 转录者: Linux (36.227.243.32), 10/05/2016 09:09:35