控制項

控制項總覽

http://maps.google.com 的地圖包含 UI 元素，以允許使用者與地圖互動。這些元素稱為「控制項」，而您可以在「Google 地圖 API」應用中任意組合使用。您也可以利用 GControl 類別的子類別，來建置自已的控制項。

「地圖 API」有一些內建好用控制項，您可以用於地圖中：

• GLargeMapControl -「Google 地圖」上使用的大型平移/縮放控制項。按照預設，會出現在地圖的左上角。
• GSmallMapControl -「Google 地圖」上使用的小型平移/縮放控制項。按照預設，會出現在地圖的左上角。
• GSmallZoomControl - 小型縮放控制項 (沒有平移控制項)，在「Google 地圖」上小型跳出視窗中，用來顯示行車導航。
• GScaleControl - 地圖比例尺
• GMapTypeControl - 讓使用者切換地圖類型的按鈕 (例如 [地圖] 和 [衛星])
• GHierarchicalMapTypeControl - 巢狀按鈕和功能表項目的選項，可放置多種地圖類型選取器。
• GOverviewMapControl - 位於畫面角落、可摺疊的總覽地圖

這些控制項都是實作 GControl 物件。

GMapTypeControl 和 GHierarchicalMapTypeControl 是特殊案例，因為它們也可以進行設定。在「Google 地圖 API」中，這些控制項會新增功能性，對目前地圖使用的 GMapType 進行變更。如需關於設定這些控制項的詳細資訊，請參閱修改標準控制項的外觀。

目前支援地圖類型的清單顯示如下：

• G_NORMAL_MAP 顯示 Google 地圖的正常、預設 2D 地圖方塊
• G_SATELLITE_MAP 顯示圖形地圖方塊
• G_HYBRID_MAP 顯示圖形地圖方塊和特殊圖徵 (道路、城市名稱) 地圖方塊圖層的混合圖
• G_PHYSICAL_MAP 根據地形資訊顯示實際地圖方塊

如果您有已經定義好的圖像或疊加層，也可以定義自己的自訂地圖類型。

根據預設，「Google 地圖 API」提供三種地圖類型：G_NORMAL_MAP、G_SATELLITE_MAP 以及 G_HYBRID_MAP。您可以透過 GMap2.removeMapType() 移除地圖類型，或透過 GMap2.addMapType() 新增它們，來變更地圖上可用的地圖類型。不論您何時建立地圖類型控制項，它都會使用目前附加的地圖類型，並讓這些地圖類型可透過該控制項使用。請注意，在新增控制項之前，您必須指定地圖類型之間的任何關聯，讓地圖類型控制項知道那些關聯。

下列程式碼從地圖附加的可用地圖類型中移除 G_HYBRID_MAP，只留下兩種地圖類型。一旦我們新增 GMapTypeControl，就只能使用這三種地圖類型。

var map = new GMap2(document.getElementById("map_canvas"),
  { size: new GSize(640,320) } );
map.removeMapType(G_HYBRID_MAP);
map.setCenter(new GLatLng(42.366662,-71.106262), 11);
var mapControl = new GMapTypeControl();
map.addControl(mapControl);
map.addControl(new GLargeMapControl());

檢視範例 (control-maptypes.html)

新增控制項至地圖

您可以使用 GMap2 方法 addControl()，將控制項新增至地圖。例如，如果要將在 Google 地圖上看到的平移/縮放控制項新增至您的地圖，則可以在地圖初始化中包含下列各行：

map.addControl(new GLargeMapControl());

您可以新增多個控制項至地圖。在此案例中，我們新增內建的 GSmallMapControl 和 GMapTypeControl 控制項，這些可以讓我們平移/縮放地圖，並且分別可以在「地圖」和「衛星」模式之間切換。地圖上包含的標準控制項都具有完整的操作功能。

var map = new GMap2(document.getElementById("map"));
map.addControl(new GSmallMapControl());
map.addControl(new GMapTypeControl());
map.setCenter(new GLatLng(37.4419, -122.1419), 13);

檢視範例 (control-simple.html)

在地圖上放置控制項

addControl 方法使用選用的第二個 GControlPosition 參數，可讓您指定地圖上控制項的位置。此值可以是下列值之一，分別指定控制項中該地圖的每個角的位置。

• G_ANCHOR_TOP_RIGHT
• G_ANCHOR_TOP_LEFT
• G_ANCHOR_BOTTOM_RIGHT
• G_ANCHOR_BOTTOM_LEFT

如果排除此引數，則地圖 API 會使用控制項指定的預設位置。

GControlPosition 可選擇指定位移，以指出放置控制項的位置距離地圖邊緣多少像素。這些位移會使用 GSize 物件來進行指定。

此範例將 GMapTypeControl 新增至地圖的右上角，邊框間距為 10 個像素。按兩下地圖上的任何地方，會移除該控制項，並將它放在地圖的右下角。

var map = new GMap2(document.getElementById"map_canvas"));
var mapTypeControl = new GMapTypeControl();
var topRight = new GControlPosition(G_ANCHOR_TOP_RIGHT, new GSize(10,10));
var bottomRight = new GControlPosition(G_ANCHOR_BOTTOM_RIGHT, new GSize(10,10));
map.addControl(mapTypeControl, topRight);
GEvent.addListener(map, "dblclick", function() {
  map.removeControl(mapTypeControl);
  map.addControl(new GMapTypeControl(), bottomRight);
});
map.addControl(new GSmallMapControl());
map.setCenter(new GLatLng(37.4419, -122.1419), 13);

檢視範例 (control-positioning.html)

請參閱GControlPosition類別參考文件以取得詳細資訊。

修改標準控制項的外觀

「Google 地圖 API」中大部分的控制項，都提供標準行為的簡單控制。不過，部分控制項需要初始化才能正常使用。例如，GHierarchicalMapTypeControl 通常需要某些初始化，才能在階層式「功能表」中，以正確的順序顯示地圖類型。

此範例新增 G_PHYSICAL_MAP 地圖類型，具有交叉線地圖方塊圖層疊加層，疊加在地圖上，然後建立 GHierarchicalMapTypeControl 以排列其他新增至地圖的地圖類型。

// define the crosshair tile layer and its required functions
var crossLayer = new GTileLayer(new GCopyrightCollection(""), 0, 15);

crossLayer.getTileUrl =  function(tile, zoom) {
  return "./include/tile_crosshairs.png";
}
crossLayer.isPng = function() {return true;}

// Create a new map type incorporating the tile layer
var layerTerCross = [ G_PHYSICAL_MAP.getTileLayers()[0], crossLayer ];
var mtTerCross = new GMapType(layerTerCross,
  G_PHYSICAL_MAP.getProjection(), "Ter+");

var map = new GMap2(document.getElementById("map_canvas"), 
  { size: new GSize(640,320) } );
map.addMapType(G_PHYSICAL_MAP);
map.addMapType(mtTerCross);
map.setCenter(new GLatLng(37.4419, -122.1419), 4);
var mapControl = new GHierarchicalMapTypeControl();

// Set up map type menu relationships
mapControl.clearRelationships();
mapControl.addRelationship(G_SATELLITE_MAP, G_HYBRID_MAP, "Labels", false);
mapControl.addRelationship(G_PHYSICAL_MAP, mtTerCross, "Crosshairs");

// Add control after you've specified the relationships
map.addControl(mapControl);

map.addControl(new GLargeMapControl());

檢視範例 (control-initialization.html)

自訂地圖控制項

「Google 地圖 API」也允許您使用 GControl 類別的子類別，來建立自訂地圖控制項。(技術上，您不用在 JavaScript 中將某物件轉換為「子類別」，而是要指派 prototype 物件給 GControl 物件的實例。)

如果要建立可用的自訂控制項，您需要為該類別的至少兩個方法定義處理常式：initialize() 和 getDefaultPosition()。initialize() 方法必須傳回 DOM 元素，而 getDefaultPosition() 方法必須傳回類型 GControlPosition 的物件。

所有地圖控制項都應該新增至地圖「容器」，利用 GMap2 的 getContainer() 方法可以存取容器。

在此範例中，我們建立簡易的縮放控制項，它具有文字連結，而非標準「Google 地圖」縮放控制項中所使用的圖形圖示。

// A TextualZoomControl is a GControl that displays textual "Zoom In"
// and "Zoom Out" buttons (as opposed to the iconic buttons used in
// Google Maps).

// We define the function first
function TextualZoomControl() {
}

// To "subclass" the GControl, we set the prototype object to
// an instance of the GControl object
TextualZoomControl.prototype = new GControl();

// Creates a one DIV for each of the buttons and places them in a container
// DIV which is returned as our control element. We add the control to
// to the map container and return the element for the map class to
// position properly.
TextualZoomControl.prototype.initialize = function(map) {
  var container = document.createElement("div");

  var zoomInDiv = document.createElement("div");
  this.setButtonStyle_(zoomInDiv);
  container.appendChild(zoomInDiv);
  zoomInDiv.appendChild(document.createTextNode("Zoom In"));
  GEvent.addDomListener(zoomInDiv, "click", function() {
    map.zoomIn();
  });

  var zoomOutDiv = document.createElement("div");
  this.setButtonStyle_(zoomOutDiv);
  container.appendChild(zoomOutDiv);
  zoomOutDiv.appendChild(document.createTextNode("Zoom Out"));
  GEvent.addDomListener(zoomOutDiv, "click", function() {
    map.zoomOut();
  });

  map.getContainer().appendChild(container);
  return container;
}

// By default, the control will appear in the top left corner of the
// map with 7 pixels of padding.
TextualZoomControl.prototype.getDefaultPosition = function() {
  return new GControlPosition(G_ANCHOR_TOP_LEFT, new GSize(7, 7));
}

// Sets the proper CSS for the given button element.
TextualZoomControl.prototype.setButtonStyle_ = function(button) {
  button.style.textDecoration = "underline";
  button.style.color = "#0000cc";
  button.style.backgroundColor = "white";
  button.style.font = "small Arial";
  button.style.border = "1px solid black";
  button.style.padding = "2px";
  button.style.marginBottom = "3px";
  button.style.textAlign = "center";
  button.style.width = "6em";
  button.style.cursor = "pointer";
}

var map = new GMap2(document.getElementById("map"));
map.addControl(new TextualZoomControl());
map.setCenter(new GLatLng(37.441944, -122.141944), 13);

檢視範例 (control-custom.html)