Marker Clustering 程式示範

因為是要配合 Google Maps JavaScript API 使用的 Library，所以就寫在 google.maps.event.addDomListener (window, 'load', function () {}); 內較為保險。首先新增 OAMarkerClustering 物件，並且給予 Maps 物件，以及相關設定，範例如下：

// 宣告初始地圖
var maps = new google.maps.Map ($('#maps').get (0), { zoom: 8, center: new google.maps.LatLng (23.8, 120.8)
});
// 宣告 OAMarkerClustering 物件
var cluster = new OAMarkerClustering ({ maps: maps, type: 'moveRun' // 分別有 moveRun、runAll
}

接著設定各個點的資訊，這邊有兩種方式提供，分別是 google.maps.LatLng 物件陣列、二維坐標陣列，其分別可以用 setLatLngs、setArrays 去做設定，範例如下：

// 四個 Demo 點
var points = [[21.899171, 120.854535], [21.905981, 120.852092], [21.922511, 120.738746]];
// 轉換成 google.maps.LatLng 物件陣列
var latLngs = points.map (function (t) { return new google.maps.LatLng (t[0], t[1]);
});
// 設置所有點
cluster.setLatLngs (latLngs);
// 使用 二維坐標陣列 的話可以使用 setArrays，如下：
// cluster.setArrays (points);

最後分別設定 單點 Marker 與 集合 Marker 要顯示的物件風格，單點 Marker 使用 setMarker，集合 Marker 使用 setClusteringMarker，其方式主要是利用回傳 Callback 結果來取得 google.maps.Marker 物件。

在 setMarker 的第一個參數代表該點的資訊，使用 setLatLngs 的話，則第一個參數就為該點 google.maps.LatLng 資訊，反之若是使用 setArrays，則第一參數就為 坐標陣列。而 setClusteringMarker 第一參數比照 setMarker 的規則，而第二參數就是此 集合 Marker 的 單點 Marker 數量！範例如下：

cluster.setClusteringMarker (function (e, count) { // 設置 集合 Marker 集合樣式，第一個參數為該點資訊，第二個參數為集合了多少點 // 利用 MarkerWithLabel 來作為 集合 Marker 的顯示 return new MarkerWithLabel ({ map: maps, position: e, labelContent: count, labelAnchor: new google.maps.Point (40 / 2, 40 / 2), labelClass: 'clustering', icon: {path: 'M 0 0'}, });
});
cluster.setMarker (function (e) { // 設置 單個 Marker 樣式，第一個參數為該點資訊 return new google.maps.Marker ({ map: maps, position: e, });
});

以上就是使用的流程簡介，相關程式範例可以參閱 GitHub 資源，亦或者直接檢視 介紹說明頁面 的 JavaScript 檔。