Google Maps API - 標註管理器

在 Google Maps 添加大量標註可能會降低顯示地圖的速度，也會產生太多視覺混亂，尤其是在處於某些縮放級別時。標註管理器 GMarkerManager 提供了一個解決這些問題的方案，允許在同一個地圖上高效顯示數百個標記，並能夠在不同的縮放級別指定所要顯示的標註。

下面這個範例我們創建了台灣縣市的鄉鎮市區行政區位置標註地圖。在縮放級別 7 到 10，僅顯示縣市。然後對於縮放級別 11 到 14，將所有鄉鎮市區顯示出來。
<br />var officeLayer = [<br /> {<br /> "zoom": [7, 10],<br /> "places": [<br /> { "name":"台北市", "icon":"sun", "posn":[25.091075, 121.5598345] },<br /> { "name":"基隆市", "icon":"sun", "posn":[25.1089809, 121.7081454] },<br /> .....<br /> ]<br /> },<br /> {<br /> "zoom": [11, 14],<br /> "places": [<br /> { "name":"台北市中正區", "icon":"snow", "posn":[25.0421407, 121.5198716] },<br /> { "name":"台北市大同區", "icon":"snow", "posn":[25.0627243, 121.5113064] },<br /> { "name":"台北市中山區", "icon":"snow", "posn":[25.0792018, 121.5427093] },<br /> .....<br /> ]<br /> }<br />];<br /><br />//取得 Icon<br />function getIcon( icon ) {<br /> var iconPath = "http://gmaps-utility-library.googlecode.com/svn/trunk/markermanager/release/examples/images/";<br /> var myIcon = new GIcon();<br /> myIcon.image = iconPath + icon +".png";<br /> myIcon.iconAnchor = new GPoint(16, 16);<br /> myIcon.infoWindowAnchor = new GPoint(16, 6);<br /> myIcon.iconSize = new GSize(32, 32);<br /> myIcon.shadow = iconPath + icon + "-shadow.png";<br /> myIcon.shadowSize = new GSize(59, 32);<br /><br /> return myIcon;<br />}<br /><br />//建立標註<br />function createMarker( oPlace ) {<br /> var myIcon = getIcon(oPlace["icon"]);<br /> var myLatLng = new GLatLng(oPlace["posn"][0], oPlace["posn"][1]);<br /> var myMarker = new GMarker(myLatLng, { title:oPlace["name"], icon:myIcon });<br /> GEvent.addListener(myMarker, "click", function(){<br /> myMarker.openInfoWindowHtml(oPlace["name"]);<br /> });<br /> return myMarker;<br />}<br /><br /><br />function load() {<br /> if (GBrowserIsCompatible()) {<br /> var myMap = new GMap2(document.getElementById("my_map"));<br /> var myLatLng = new GLatLng(25.0426818, 121.6516113);<br /> myMap.setCenter(myLatLng, 9);<br /> myMap.addControl(new GLargeMapControl());<br /> <br /> var myMgr = new GMarkerManager(myMap);<br /> for (var i in officeLayer) {<br /> var oLayer = officeLayer[i];<br /> var lyMarkers = [];<br /> for (var j in oLayer["places"]) {<br /> lyMarkers.push( createMarker(oLayer["places"][j]) );<br /> }<br /> myMgr.addMarkers(lyMarkers, oLayer["zoom"][0], oLayer["zoom"][1]);<br /> }<br /> myMgr.refresh();<br /> }<br />}<br />
看範例所呈現的結果

var myMgr = new GMarkerManager(myMap); 建立一個標註管理器物件，其中 myMap 就是要控制的指定地圖。

GMarkerManager.addMarkers(markers, minZoom, maxZoom?) 向此標記管理器添加一批標註。直到調用 refresh() 方法時，才會向地圖添加這批標註。將標註置於地圖中後，如果這些標註都在地圖的當前視窗範圍內並且地圖的縮放級別高於或等於指定的 minZoom，則顯示標註。如果設定了 maxZoom，則在地圖的縮放級別高於或等於指定級別時自動刪除標註。

GMarkerManager.refresh(); 強制管理器更新地圖上顯示的標註。如果是使用 addMarkers 方法添加的標註，則必須調用此方法。

GMarkerManager.addMarker(marker, minZoom, maxZoom?) 向此管理器控制的標記集合添加單個標註。如果標註的位置在地圖的當前視窗範圍內，並且地圖的縮放級別屬於指定的縮放級別範圍，則立即向地圖添加標註。與 addMarkers 方法類似，minZoom 和可選的 maxZoom 參數指定顯示標註的縮放級別範圍。

參考︰
‧class GMarkerManager︰addMarkers(markers, minZoom, maxZoom?)、refresh()、GMarkerManager.addMarker(marker, minZoom, maxZoom?)

更多教學文件在此︰Google Maps API - 前言及目錄