[JavaScript] Google Map API的標記叢集(marker clusterer)使用心得 @ 小攻城師的戰場筆記

因為有一個頁面要設定大量的 Google Map 地圖標記 (marker)，覺得標記一多看起來好混亂，記得好像有很多網站可以把它 Google Map 的地圖標記群組起來，但是一開始找不到。問了其他人才知道，這個地圖標記群組叫做「地圖標記叢集」(marker cluster)。

有人推薦 jQuery plugin "tinyMap"，身為一個懶人，有 jQuery plugin 當然是直接撈來用，但可能是天意註定要我勤快一點看原始文件，我怎麼用都用不起來。 XD

最以後來參考了官方 API 的介紹文："Too Many Markers!"，這樣子完成了我該做的事：

$(document).ready(function() {
    $.ajax({
        url : "map_list.txt",   // JSON 資料路徑
        success : function(data) {
            data = $.parseJSON(data);
            var markers = data.result;

            // -- 設定地圖樣式
            var styles = [
                {
                    stylers: [
                        { saturation: -50 }
                    ]
                },
                {
                    featureType: "road",
                    elementType: "geometry",
                    stylers: [
                        { lightness: 30 },
                        { visibility: "simplified" }
                    ]
                },
                {
                    featureType: "road",
                    elementType: "labels",
                    stylers: [
                        { visibility: "off" }
                    ]
                }
            ];  // -- 設定地圖樣式

            var styledMap = new google.maps.StyledMapType(styles, {name: "My Map!"});

            var map = new google.maps.Map(document.getElementById("map"), {
                center : new google.maps.LatLng(23.849647, 120.922398), // 指定地圖的中心點，這邊我設在台灣
                zoom : 9,
                mapTypeControlOptions: {
                    mapTypeIds: [google.maps.MapTypeId.ROADMAP, 'map_style']
                }
            });

            map.mapTypes.set('map_style', styledMap);
            map.setMapTypeId('map_style');

            var infoWindow = new google.maps.InfoWindow(); // 設定氣泡框 (message bubble)，顯示地標相關的資訊

            var markerClusterer = [];   // 設定標記叢集 (marker clusterer)

            for ( var i = 0; i < markers.length; i++) {
                var name = markers[i].name;
                var content = markers[i].content;
                var point = new google.maps.LatLng(parseFloat(markers[i].latitude), parseFloat(markers[i].longitude)); // 將 JSON 裡讀出來的地標逐一加到地圖上
                var html = "<h3>" + name + "</h3><p>" + content +"</p>"; // 設定點選地圖標記後的對話氣泡框的內容 (可以使用 HTML tag)
   // 把地標加到地圖上
                var marker = new google.maps.Marker({
                    map : map,
                    position : point,
                    icon : 'blank.png'
                });

                bindInfoWindow(marker, map, infoWindow, html); // 把對話框內容綁到地圖標記上頭
  // 先把所有要做成標記叢集 (marker clusterer) 的標記通通塞進一個集合 (collection)
                markerClusterer.push(marker);
            }

  // 設定標記叢集的外觀
            var markerClusterDraw = new MarkerClusterer(map, markerClusterer, {
                gridSize: 80, // 多少範圍內的標記要撿在一組 (是用 grid 的概念，落在框外的有時會自成單一地圖標記 (marker)，不會轉成 marker clusterer)
                styles: [{
                    url: 'clusterer.png', // 可以自訂圖案
                    height: 45,
                    width: 50,
                    anchor: [1, 12],    // 文字出現在標記上的哪個位置 (position on marker)
                    textColor: '#ffffff',
                    textSize: 13
                },
                {
                    url: 'clusterer.png',
                    height: 45,
                    width: 50,
                    anchor: [1, 8],
                    textColor: '#ffffcc',
                    textSize: 8
                }],
            });
        }
    });
});

// 設定地圖標記 (marker) 點開後的對話氣泡框 (message bubble)
function bindInfoWindow(marker, map, infoWindow, html) {
  // 除了 click 事件，也可以用 mouseover 等事件觸發氣泡框顯示
    google.maps.event.addListener(marker, 'click', function() {
        infoWindow.setContent(html);
        infoWindow.open(map, marker);
    });
}