控件

控件概述

http://ditu.google.cn 上的地图包含允许用户与地图交互的 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 地图默认的普通二维图块
• G_SATELLITE_MAP 显示拍摄的图块
• G_HYBRID_MAP 同时显示拍摄的图块和普通（突出显示道路、城市名等明显地图特征）图块
• G_PHYSICAL_MAP 根据地形信息显示实际地图图块

如果您有图像或者已经定义好的叠加层，也可以定义自己的自定义地图类型。

默认情况下，Google 地图 API 提供三种地图类型：G_NORMAL_MAP、G_SATELLITE_MAP 和 G_HYBRID_MAP。您可以通过这两种方式来改变地图上可用的地图类型：使用 GMap2.removeMapType() 删除地图类型；使用 GMap2.addMapType() 添加地图类型。无论您何时创建地图类型控件，它都使用当前地图上已经添加的地图类型，并通过控件让用户可以切换这些地图类型。请注意，您必须在添加地图类型控件（主要指 GHierarchicalMapTypeControl）之前指定各地图类型之间的阶层关系，以便地图类型控件可以准确反映这些关系。

使用下面的代码可将 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(39.927, 116.407), 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(39.9493, 116.3975), 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(39.9493, 116.3975), 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(39.9493, 116.3975), 4);
var mapControl = new GHierarchicalMapTypeControl();

// Set up map type menu relationships
mapControl.clearRelationships();
mapControl.addRelationship(G_SATELLITE_MAP, G_HYBRID_MAP, "文字标记", false);
mapControl.addRelationship(G_PHYSICAL_MAP, mtTerCross, "十字交叉");

// 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 的对象。

所有自定义的地图控件中的 DOM 元素最终都应该添加到地图容器（也是 DOM 元素）中去，这个地图容器可以通过 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("放大"));
  GEvent.addDomListener(zoomInDiv, "click", function() {
    map.zoomIn();
  });

  var zoomOutDiv = document.createElement("div");
  this.setButtonStyle_(zoomOutDiv);
  container.appendChild(zoomOutDiv);
  zoomOutDiv.appendChild(document.createTextNode("缩小"));
  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)