因為有一個頁面要設定大量的 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);
    });
}

 

完成品長這樣:

Google Map API的標記叢集(marker clusterer):第一層 

Google Map API的標記叢集(marker clusterer):從第一層點進來展開的畫面 

Google Map API的標記叢集(marker clusterer):點到最裡層的時候就剩 marker,可以點選單一標記出現詳情 

以上簡單寫,改天再來完整寫一下這整個地圖怎麼做的。 XD

 

相關連結

文章標籤

創作者介紹
創作者 fannys23 的頭像
fannys23

小攻城師的戰場筆記

fannys23 發表在 痞客邦 留言(0) 人氣()