Google 地图 API V3 之控件
控件概述
通过 Google Maps API 显示的地图包含用户界面元素，以便用户与地图进行交互。这些元素称为“控件”。您可以在 Google Maps API 应用中添加这些控件的多种组合。或者，您也可以不进行任何操作，让 Google Maps API 处理所有控件行为。
Maps API 带有一部分可在地图中使用的内置控件：
- 缩放控件，显示滑块（针对大地图）或“+/-”小按钮（针对小地图），用于控制地图的缩放等级。在非触摸的设备上，该控件默认显示在地图的左上角，而在触摸设备上则显示在左下角。
- 平移控件，显示用于平移地图的按钮。在非触摸的设备上，该控件默认显示在地图的左上角。您还可以使用平移控件对图像进行 45° 旋转（如果可用的话）。
- 比例控件，用于显示地图比例元素。默认情况下，系统不会启用此控件。
- MapType 控件，可让用户在不同的地图类型（例如
ROADMAP和SATELLITE）之间进行切换。该控件默认显示在地图的右上角。 - 街景视图控件包含一个街景小人图标，将该图标拖动到地图上即可启用街景视图。该控件默认显示在地图的左上角。
- 旋转控件包含一个较小的圆形图标，可让您旋转包含斜面图像的地图。该控件默认显示在地图的左上角。（有关详情，请参阅 45° 图像。）
- 总览图控件会显示一个简略的总览图，用于在更广阔区域内反映当前的地图视口。该控件默认以折叠状态显示在地图的右下角。
注意：以前提供的导航控件已弃用，并分割为独立的缩放和平移控件。
您无法直接访问或修改这些地图控件，但可修改地图的 MapOptions 字段，这些字段会影响控件的可见性和显示效果。您可以在初始化地图后调整控件的显示效果（使用相应的 MapOptions），也可以通过调用 setOptions() 来更改地图的选项，以对地图进行动态修改。
默认情况下，系统并不会启用所有这些控件。要了解默认用户界面行为（以及如何修改此类行为），请参阅下面的默认用户界面。
默认用户界面
您可能只想指定自己的地图展示 Google 地图界面的外观（其中包括以后要添加到地图中的所有新地图项或控件），而不想指定和设置单独的控件。要实现此行为，您无需进行任何操作。您的地图会显示默认控件。
默认控件集
Maps API 提供了以下默认控件：
| 控件 | 大屏幕 | 小屏幕 | iPhone | Android |
|---|---|---|---|---|
| 缩放 | 大型缩放控件，适用于 400x350 像素以上的屏幕 | 小型缩放控件，适用于 400x350 像素以下的屏幕 | 不显示。缩放是通过两根手指的开合操作来实现的。 | “触摸”式控件 |
| 平移 | 对 400x350 像素以上的屏幕显示 | 对 400x350 像素以下的屏幕不显示 | 不显示。平移是通过触摸来实现的。 | 不显示。平移是通过触摸来实现的。 |
| MapType | 水平栏，适用于宽度 300 像素以上的屏幕 | 下拉菜单，适用于宽度 300 像素以下的屏幕 | 与大屏幕/小屏幕相同 | 与大屏幕/小屏幕相同 |
| 缩放 | 不显示 | 不显示 | 不显示 | 不显示 |
此外，系统对所有设备都默认启用了键盘处理功能。
停用默认用户界面
有时，您可能需要关闭 API 的默认用户界面设置。要执行此操作，请将 Map 的 disableDefaultUI 属性（在 Map options 对象中）设置为 true。此属性可停用 Google Maps API 中所有自动执行的用户界面行为。
以下代码可彻底停用默认用户界面：
function initialize() {
var mapOptions = {
zoom: 4,
center: new google.maps.LatLng(-33, 151),
disableDefaultUI: true,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById("map_canvas"),
mapOptions);
}向地图添加控件
您可能想要通过删除、添加或修改用户界面行为或控件调整您的界面，并确保即使以后进行了更新，也不会改变这种行为。如果您只想添加或修改现有的行为，您需要确保以显式的方式将相应的控件添加到自己的应用中。
有些控件在默认情况下会出现在地图上，而其他控件则只有在您明确提出相关请求后，才会显示出来。您可以将以下 Map options 对象的字段设为 true 以显示相应控件，或者设为 false 以隐藏相应控件，从而通过这些字段指定向地图添加控件或从地图删除控件：
{
panControl: boolean,
zoomControl: boolean,
mapTypeControl: boolean,
scaleControl: boolean,
streetViewControl: boolean,
overviewMapControl: boolean
}function initialize() {
var mapOptions = {
zoom: 4,
center: new google.maps.LatLng(-33, 151),
panControl: false,
zoomControl: false,
scaleControl: true,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById("map_canvas"),
mapOptions);
}控件选项
有些控件是可以配置的，这样您就可以更改它们的行为或外观。例如，缩放控件可显示为带有滑块的大型完整控件，也可以显示为适用于较小地图的小型迷你缩放控件。
您可以在创建地图后更改 MapOptions 对象中的相应控件选项字段，从而对这些控件进行修改。例如，用于更改缩放控件的选项位于 zoomControlOptions 字段中。
缩放控件可能出现在以下某个 style 选项中：
-
google.maps.ZoomControlStyle.SMALL，用于显示迷你缩放控件，其中仅包含 ＋ 和 － 按钮。此样式适用于小型地图。在触摸设备上，该控件显示为可相应触摸事件的 + 和 - 按钮。 -
google.maps.ZoomControlStyle.LARGE用于显示标准缩放滑块控件。在触摸设备上，该控件显示为可相应触摸事件的 + 和 - 按钮。 -
google.maps.ZoomControlStyle.DEFAULT，用于根据地图大小和运行地图的设备来挑选合适的缩放控件。
MapType 控件可显示为以下某个 style 选项：
-
google.maps.MapTypeControlStyle.HORIZONTAL_BAR，用于在水平栏中将一组控件显示为如 Google 地图中所示的按钮。 -
google.maps.MapTypeControlStyle.DROPDOWN_MENU，用于显示单个按钮控件，以便您通过下拉菜单选择地图类型。 -
google.maps.MapTypeControlStyle.DEFAULT，用于显示“默认”行为，该行为取决于屏幕大小且可能会在以后的 API 版本中有所变化。
请注意，如果您确实想要修改任何控件选项，还应将相应的 MapOptions 值设为 true 以显式启用相关控件。例如，要将缩放控件设置为显示 SMALL 样式，请在 MapOptions对象内使用以下代码：
...
zoomControl: true,
zoomControlOptions: {
style: google.maps.ZoomControlStyle.SMALL
}
...function initialize() {
var mapOptions = {
zoom: 4,
center: new google.maps.LatLng(-33, 151),
mapTypeControl: true,
mapTypeControlOptions: {
style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
},
zoomControl: true,
zoomControlOptions: {
style: google.maps.ZoomControlStyle.SMALL
},
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById("map_canvas"),
mapOptions);
} 控件通常是在创建地图后进行配置的。不过，您可以调用 Map 的 setOptions() 方法并为相应控件传递新的控件选项，以动态更改控件的显示效果。
修改控件
您可以在创建地图时，通过地图的 MapOptions 对象中的字段来指定控件的显示效果。下面对这些字段进行了说明：
-
mapTypeControl，用于启用/停用地图类型控件，该控件可让用户在不同的地图类型（例如“地图”和“卫星”）之间进行切换。默认情况下，此控件会显示在地图右上角。mapTypeControlOptions，用于进一步指定要用于此控件的MapTypeControlOptions。 -
panControl，用于启用/停用平移控件。默认情况下，此控件会显示在地图左上角。panControlOptions，用于进一步指定要用于此控件的PanControlOptions。 -
zoomControl，用于启用/停用缩放控件。默认情况下，此控件会显示在地图左上角。zoomControlOptions，用于进一步指定要用于此控件的ZoomControlOptions。 -
scaleControl，用于启用/停用比例控件，该控件可提供一个简单的地图比例尺。默认情况下，不会显示此控件。启用后，它将显示在地图的左下角。scaleControlOptions，用于进一步指定要用于此控件的ScaleControlOptions。 -
rotateControl，用于决定显示/不显示旋转控件，该控件可控制 45° 图像的方向。默认情况下，该控件是否显示取决于给定地图类型在当前的缩放级别和位置上是否存在 45° 图像。要更改控件的行为，您可以设置地图的rotateControlOptions以指定要使用的RotateControlOptions（不过，如果当前没有可用的 45° 图像，则无法显示该控件）。 -
overviewMapControl，用于启用/停用总览图控件。总览图控件可以显示为完整的控件（展示简略的总览图），也可以显示为折叠的最小化状态。默认情况下，该控件处于停用和折叠状态。overviewMapControlOptions，用于进一步指定要用于此控件的OverviewMapControlOptions。
请注意，您可以为您最初停用的控件指定选项。
控件定位
每个控件选项都包含 position 属性（类型为 ControlPosition），该属性用于指明要在地图上放置相应控件的位置。控件的定位并不是绝对的；相反，API 会在给定的约束条件（例如地图大小）下，通过围绕现有地图元素或其他控件“流动”控件来以智能方式对控件进行布局。
注意：虽然 API 会尝试以智能方式排列控件，但这并不能保证控件不会叠加给定的复杂布局。
系统支持以下控件位置：
-
TOP_CENTER，表示控件应沿着地图顶部中心放置。 -
TOP_LEFT，表示控件应沿着地图顶部左侧放置，其中任何子元素均“流”向顶部中心。 -
TOP_RIGHT，表示控件应沿着地图顶部右侧放置，其中任何子元素均“流”向顶部中心。 -
LEFT_TOP，表示控件应沿着地图顶部左侧放置，但应位于所有TOP_LEFT元素的下方。 -
RIGHT_TOP，表示控件应沿着地图顶部右侧放置，但应位于所有TOP_RIGHT元素的下方。 -
LEFT_CENTER，表示控件应沿着地图左侧放置，位于TOP_LEFT和BOTTOM_LEFT位置的中间。 -
RIGHT_CENTER，表示控件应沿着地图右侧放置，位于TOP_RIGHT和BOTTOM_RIGHT位置的中间。 -
LEFT_BOTTOM，表示控件应沿着地图底部左侧放置，但应位于所有BOTTOM_LEFT元素的上方。 -
RIGHT_BOTTOM，表示控件应沿着地图底部右侧放置，但应位于所有BOTTOM_RIGHT元素的上方。 -
BOTTOM_CENTER，表示控件应沿着地图底部中心放置。 -
BOTTOM_LEFT，表示控件应沿着地图底部左侧放置，其中任何子元素均“流”向底部中心。 -
BOTTOM_RIGHT，表示控件应沿着地图底部右侧放置，其中任何子元素均“流”向底部中心。
请注意，这些位置可能会与用户界面元素的位置相冲突，而您无法修改用户界面元素（如版权和 Google 徽标）的位置。在这种情况下，控件将按照每个位置所注明的逻辑“流动”，并显示在尽可能靠近指定位置的位置。
下面的示例展示了一张简单的地图，其中启用了位于不同位置的所有控件。
function initialize() {
var mapOptions = {
zoom: 12,
center: new google.maps.LatLng(-28.643387, 153.612224),
mapTypeId: google.maps.MapTypeId.ROADMAP,
mapTypeControl: true,
mapTypeControlOptions: {
style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR,
position: google.maps.ControlPosition.BOTTOM_CENTER
},
panControl: true,
panControlOptions: {
position: google.maps.ControlPosition.TOP_RIGHT
},
zoomControl: true,
zoomControlOptions: {
style: google.maps.ZoomControlStyle.LARGE,
position: google.maps.ControlPosition.LEFT_CENTER
},
scaleControl: true,
scaleControlOptions: {
position: google.maps.ControlPosition.TOP_LEFT
},
streetViewControl: true,
streetViewControlOptions: {
position: google.maps.ControlPosition.LEFT_TOP
}
}
var map = new google.maps.Map(document.getElementById("map_canvas"),
mapOptions);
}<%@ Page Language="C#" AutoEventWireup="true" %>
谷歌地图 v3
自定义控件
除了修改现有 API 控件的样式和位置外，您还可以创建自己的控件以处理与用户的交互操作。控件是固定的小部件，浮动在地图之上的绝对位置处，这与会随着下面的地图一起移动的“叠加层”不同。从本质上讲，控件只是一个在地图上具有绝对位置的 要创建您自己的自定义控件，没有什么必须遵循的“规则”。不过，您可以将以下准则视为最佳实践的参考： 下面将分别对这些准则加以说明。 如何绘制控件由您自己决定。一般而言，建议您将所有的控件显示方式放在单个 设计具有吸引力的控件需要具备一些 CSS 和 DOM 结构方面的知识。以下代码显示了如何通过一个 要使控件有用，它必须能够实际完成某些任务。控件的用途由您确定。控件可以响应用户的输入内容，也可以响应 为响应用户输入，Maps API 提供了一个跨浏览器的事件处理方法 要在地图上定位自定义控件，请在 每个 API 会按照 以下代码创建了一个新的自定义控件（未显示其构造函数），并将该控件添加到地图中的 下面是一个简单的控件（尽管不是很实用），其中综合了上面所示的模式。该控件通过使地图在某个默认位置上居中来响应 DOM 控件也可以存储状态。下面的示例与前面所示的类似，但该控件包含了一个额外的“Set Home”按钮，它将控件设置为显示一个新首页位置。为此，我们在该控件内创建了一个
'click'' 事件），通过事件处理程序处理与用户或地图的交互。Map 的 controls 属性中。
绘制自定义控件
// Create a div to hold the control.
var controlDiv = document.createElement('div');
// Set CSS styles for the DIV containing the control
// Setting padding to 5 px will offset the control
// from the edge of the map.
controlDiv.style.padding = '5px';
// Set CSS for the control border.
var controlUI = document.createElement('div');
controlUI.style.backgroundColor = 'white';
controlUI.style.borderStyle = 'solid';
controlUI.style.borderWidth = '2px';
controlUI.style.cursor = 'pointer';
controlUI.style.textAlign = 'center';
controlUI.title = 'Click to set the map to Home';
controlDiv.appendChild(controlUI);
// Set CSS for the control interior.
var controlText = document.createElement('div');
controlText.style.fontFamily = 'Arial,sans-serif';
controlText.style.fontSize = '12px';
controlText.style.paddingLeft = '4px';
controlText.style.paddingRight = '4px';
controlText.innerHTML = 'Home';
controlUI.appendChild(controlText); 处理自定义控件的事件
Map 的状态变化。addDomListener()，该方法可以处理大多数受浏览器支持的 DOM 事件。以下代码段为浏览器的 'click'事件添加了一个监听器。请注意，此事件是从 DOM（而非地图）接收的。// Setup the click event listener: simply set the map to center on Chicago
var chicago = new google.maps.LatLng(41.850033, -87.6500523);
google.maps.event.addDomListener(outer, 'click', function() {
map.setCenter(chicago)
}); 定位自定义控件
Map 对象的 controls 属性中将相应控件放在适当的位置。此属性包含 google.maps.ControlPosition 数组。您可以将 Node（通常为ControlPosition，以向地图中添加自定义控件。（有关这些位置的信息，请参阅上面的控件定位。）
ControlPosition 均会存储显示在相应位置上的控件的 MVCArray。因此，当您向该位置添加或从该位置删除控件时，API 将对控件作出相应的更新。index 属性的顺序分别将控件放在各自的位置上；并且索引值较低的控件的位置会较靠前。例如，BOTTOM_RIGHT 位置处的两个自定义控件将按照此索引顺序进行排列，并优先放置索引值较低的控件。默认情况下，API 会先放置所有的 API 默认控件，然后才开始放置所有自定义控件。您可以通过将控件的 index 属性设为负值，以覆盖此行为。自定义控件无法放置在徽标的左侧或版权的右侧。TOP_RIGHT 位置。var map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);
// Construct your control in whatever manner is appropriate.
// Generally, your constructor will want access to the
// DIV on which you'll attach the control UI to the Map.
var controlDiv = document.createElement('div');
var myControl = new MyControl(controlDiv);
// We don't really need to set an index value here, but
// this would be how you do it. Note that we set this
// value as a property of the DIV itself.
controlDiv.index = 1;
// Add the control to the map at a designated control position
// by pushing it on the position's array. This code will
// implicitly add the control to the DOM, through the Map
// object. You should not attach the control manually.
map.controls[google.maps.ControlPosition.TOP_RIGHT].push(controlDiv); 自定义控件示例
'click' 事件：var map;
var chicago = new google.maps.LatLng(41.850033, -87.6500523);
/**
* The HomeControl adds a control to the map that simply
* returns the user to Chicago. This constructor takes
* the control DIV as an argument.
*/
function HomeControl(controlDiv, map) {
// Set CSS styles for the DIV containing the control
// Setting padding to 5 px will offset the control
// from the edge of the map.
controlDiv.style.padding = '5px';
// Set CSS for the control border.
var controlUI = document.createElement('div');
controlUI.style.backgroundColor = 'white';
controlUI.style.borderStyle = 'solid';
controlUI.style.borderWidth = '2px';
controlUI.style.cursor = 'pointer';
controlUI.style.textAlign = 'center';
controlUI.title = 'Click to set the map to Home';
controlDiv.appendChild(controlUI);
// Set CSS for the control interior.
var controlText = document.createElement('div');
controlText.style.fontFamily = 'Arial,sans-serif';
controlText.style.fontSize = '12px';
controlText.style.paddingLeft = '4px';
controlText.style.paddingRight = '4px';
controlText.innerHTML = 'Home';
controlUI.appendChild(controlText);
// Setup the click event listeners: simply set the map to Chicago.
google.maps.event.addDomListener(controlUI, 'click', function() {
map.setCenter(chicago)
});
}
function initialize() {
var mapDiv = document.getElementById('map_canvas');
var mapOptions = {
zoom: 12,
center: chicago,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(mapDiv, mapOptions);
// Create the DIV to hold the control and call the HomeControl() constructor
// passing in this DIV.
var homeControlDiv = document.createElement('div');
var homeControl = new HomeControl(homeControlDiv, map);
homeControlDiv.index = 1;
map.controls[google.maps.ControlPosition.TOP_RIGHT].push(homeControlDiv);
} 为控件添加状态
home_ 属性以存储此状态，并为该状态提供了获取函数和设置函数。
运行结果如下图：
<%@ Page Language="C#" AutoEventWireup="true" %>