控件 | Google Maps JavaScript API

控件概览

通过 Google Maps JavaScript API 显示的地图包含的 UI 元素可方便用户与地图进行交互。这些元素称为“控件”，可以在应用中加入这些控件的多种组合。或者，您也可以不进行任何操作，让 Google Maps JavaScript API 处理所有控件行为。

下面地图显示的是 Google Maps JavaScript API 默认显示的一组控件：

查看示例 (control-default.html)。

下面列出了一整套可在地图中使用的控件：

缩放控件：显示“+”和“-”按钮，用于更改地图的缩放比例。此控件默认显示在地图右下角。
地图类型控件：具有下拉菜单和水平按钮栏两种样式可供选择，让用户能够选择地图类型（ROADMAP、SATELLITE、HYBRID 或 TERRAIN）。此控件默认显示在地图左上角。
街景视图控件：其中包含一个街景小人图标，将该图标拖动到地图上即可启用街景视图。此控件默认显示在地图右下角。
旋转控件：用于为含有倾斜图像的地图提供倾斜和旋转选项组合。此控件默认显示在地图右下角。有关详细信息，请参阅 45° 图像。
比例控件：用于显示地图比例元素。此控件默认处于禁用状态。
全屏控件提供以全屏模式打开地图的选项。默认情况下，此控件在移动设备上处于启用状态，在桌面设备上处于停用状态。注：iOS 不支持全屏功能。因此，全屏控件在 iOS 设备上不可见。

您无法直接访问或修改这些地图控件，但可修改地图的 MapOptions 字段，这些字段会影响控件的可见性和显示效果。您可以在初始化地图后调整控件的显示效果（使用相应的 MapOptions），也可以通过调用 setOptions() 来更改地图的选项，以对地图进行动态修改。

默认情况下，系统并不会启用所有这些控件。要了解默认用户界面行为（以及如何修改此类行为），请参阅下面的默认用户界面。

默认用户界面

默认情况下，如果地图过小 (200x200px)，所有控件都不会显示。您可以通过将控件显式设置为可见来重写这一行为。请参阅向地图添加控件。

控件的行为和显示方式对于移动设备和桌面设备都一样，但全屏控件除外（请参阅控件列表中介绍的行为）。

此外，键盘处理功能在所有设备上都默认处于启用状态。

禁用默认用户界面

有时，您可能需要完全关闭 API 的默认用户界面设置。要执行此操作，请将地图的 disableDefaultUI 属性（在 MapOptions 对象中）设置为 true。此属性可停用 Google Maps JavaScript API 中所有自动执行的 UI 行为。

以下代码可彻底禁用默认用户界面：

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 4,
    center: {lat: -33, lng: 151},
    disableDefaultUI: true
  });
}

<div id="map"></div>

/* Always set the map height explicitly to define the size of the div
 * element that contains the map. */
#map {
  height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}

 <!-- Replace the value of the key parameter with your own API key. -->
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap">
</script>

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 4,
    center: {lat: -33, lng: 151},
    disableDefaultUI: true
  });
}

查看示例 (control-disableUI.html)。

向地图添加控件

您可能想要通过删除、添加或修改用户界面行为或控件来定制您的界面，并确保即使以后进行了更新，也不会改变这种行为。如果您只想添加或修改现有的行为，您需要确保以显式方式将相应的控件添加到自己的应用中。

有些控件默认显示在地图上，而其他控件则只有在您明确提出相关请求后，才会显示出来。您可以将以下 MapOptions 对象的字段设置为 true 以显示相应控件，或者设置为 false 以隐藏相应控件，藉此指定向地图添加控件或从地图删除控件：

{
  zoomControl: boolean,
  mapTypeControl: boolean,
  scaleControl: boolean,
  streetViewControl: boolean,
  rotateControl: boolean,
  fullscreenControl: boolean
}

默认情况下，如果地图小于 200x200px，所有控件都不会显示。您可以通过将控件显式设置为可见来重写这一行为。例如，下表显示了根据地图尺寸及 zoomControl 字段的设置，缩放控件是否可见。

地图尺寸	`zoomControl`	可见？
任意	`false`	否
任意	`true`	是
>= 200x200px	`undefined`	是
< 200x200px	`undefined`	否

下例对地图进行了设置，使其隐藏缩放控件，显示比例控件。请注意，我们并未显式禁用默认用户界面，因此您可在默认用户界面行为中添加这些修改。

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 4,
    center: {lat: -33, lng: 151},
    zoomControl: false,
    scaleControl: true
  });
}

<div id="map"></div>

/* Always set the map height explicitly to define the size of the div
 * element that contains the map. */
#map {
  height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}

 <!-- Replace the value of the key parameter with your own API key. -->
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap">
</script>

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 4,
    center: {lat: -33, lng: 151},
    zoomControl: false,
    scaleControl: true
  });
}

查看示例 (control-simple.html)。

控件选项

有些控件是可以配置的，允许您更改它们的行为或外观。例如，地图类型控件可以水平栏或下拉菜单形式显示。

您可以在创建地图后更改 MapOptions 对象中的相应控件选项字段，从而对这些控件进行修改。

例如，用于更改地图类型控件的选项位于 mapTypeControlOptions 字段中。地图类型控件可能出现在以下某个 style 选项中：

google.maps.MapTypeControlStyle.HORIZONTAL_BAR：用于在水平栏中将一组控件显示为如 Google 地图中所示的按钮
google.maps.MapTypeControlStyle.DROPDOWN_MENU：用于显示单个按钮控件，以便您通过下拉菜单选择地图类型
google.maps.MapTypeControlStyle.DEFAULT：用于显示默认行为，该行为取决于屏幕大小且可能会在以后的 API 版本中有所变化

请注意，如果您确实想要修改任何控件选项，还应将相应的 MapOptions 值设置为 true 以显式启用相关控件。例如，要将地图类型控件设置为显示 DROPDOWN_MENU 样式，请在 MapOptions 对象内使用以下代码：

  ...
  mapTypeControl: true,
  mapTypeControlOptions: {
    style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
  }
  ...

下例演示了如何更改控件的默认位置和样式。

// You can set control options to change the default position or style of many
// of the map controls.

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 4,
    center: {lat: -33, lng: 151},
    mapTypeControl: true,
    mapTypeControlOptions: {
      style: google.maps.MapTypeControlStyle.DROPDOWN_MENU,
      mapTypeIds: ['roadmap', 'terrain']
    }
  });
}

<div id="map"></div>

/* Always set the map height explicitly to define the size of the div
 * element that contains the map. */
#map {
  height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}

 <!-- Replace the value of the key parameter with your own API key. -->
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap">
</script>

// You can set control options to change the default position or style of many
// of the map controls.

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 4,
    center: {lat: -33, lng: 151},
    mapTypeControl: true,
    mapTypeControlOptions: {
      style: google.maps.MapTypeControlStyle.DROPDOWN_MENU,
      mapTypeIds: ['roadmap', 'terrain']
    }
  });
}

查看示例 (control-options.html)。

控件通常是在创建地图后进行配置的。不过，您可以通过调用 Map 的 setOptions() 方法并为相应控件传递新的控件选项，来动态更改控件的显示效果。

修改控件

您可以在创建地图时，通过地图的 MapOptions 对象中的字段来指定控件的显示效果。这些字段描述如下：

zoomControl：用于启用/禁用缩放控件。默认情况下，此控件可见并显示在地图右下角。zoomControlOptions 字段用于进一步指定要用于此控件的 ZoomControlOptions
mapTypeControl：用于启用/禁用地图类型控件，该控件可让用户在不同的地图类型（例如“地图”和“卫星”）之间进行切换。默认情况下，此控件可见并显示在地图左上角。mapTypeControlOptions 字段用于进一步指定要用于此控件的 MapTypeControlOptions
streetViewControl：用于启用/禁用街景小人控件，该控件可让用户激活街景全景图。默认情况下，此控件可见并显示在地图右下角。streetViewControlOptions 字段用于进一步指定要用于此控件的 StreetViewControlOptions
rotateControl：用于显示/取消显示旋转控件，该控件可控制 45° 图像的方向。默认情况下，该控件是否显示取决于给定地图类型在当前的缩放级别和位置上是否存在 45° 图像。您可以通过设置地图的 rotateControlOptions 以指定要使用的 RotateControlOptions，来更改控件的行为。不过，如果当前没有可用的 45° 图像，则无法显示该控件
scaleControl：用于启用/禁用比例控件，该控件可提供一个简单的地图比例尺。默认情况下，此控件不可见。启用后，它将始终显示在地图右下角。scaleControlOptions 用于进一步指定要用于此控件的 ScaleControlOptions
fullscreenControl：用于启用/停用以全屏模式打开地图的控件。默认情况下，此控件在移动设备上可见，在桌面设备上不可见。启用时，此控件出现在靠近地图右上角的位置。fullscreenControlOptions：用于进一步指定要用于此控件的 FullscreenControlControlOptions。

请注意，您可以为您最初禁用的控件指定选项。

控件定位

大多数控件选项都包含 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：表示控件应沿着地图右下角放置，控件的所有子元素“流”向底部中心

查看示例 (control-positioning-labels.html)。

请注意，这些位置可能会与用户界面元素的位置重叠，而您无法修改用户界面元素（如版权和 Google 徽标）的位置。此情况下，控件将根据每个位置的逻辑说明而“流动”，并显示在尽可能靠近指定位置的位置。

下例展示了一张简单的地图，其中启用了位于不同位置的所有控件。

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 12,
    center: {lat: -28.643387, lng: 153.612224},
    mapTypeControl: true,
    mapTypeControlOptions: {
        style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR,
        position: google.maps.ControlPosition.TOP_CENTER
    },
    zoomControl: true,
    zoomControlOptions: {
        position: google.maps.ControlPosition.LEFT_CENTER
    },
    scaleControl: true,
    streetViewControl: true,
    streetViewControlOptions: {
        position: google.maps.ControlPosition.LEFT_TOP
    },
    fullscreenControl: true
  });
}

<div id="map"></div>

/* Always set the map height explicitly to define the size of the div
 * element that contains the map. */
#map {
  height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}

 <!-- Replace the value of the key parameter with your own API key. -->
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap">
</script>

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 12,
    center: {lat: -28.643387, lng: 153.612224},
    mapTypeControl: true,
    mapTypeControlOptions: {
        style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR,
        position: google.maps.ControlPosition.TOP_CENTER
    },
    zoomControl: true,
    zoomControlOptions: {
        position: google.maps.ControlPosition.LEFT_CENTER
    },
    scaleControl: true,
    streetViewControl: true,
    streetViewControlOptions: {
        position: google.maps.ControlPosition.LEFT_TOP
    },
    fullscreenControl: true
  });
}

查看示例 (control-positioning.html)。

自定义控件

除了修改现有 API 控件的样式和位置外，您还可以创建自己的控件以处理与用户的交互操作。控件是固定的小工具，浮动在地图之上的绝对位置处，这与会随着下面的地图一起移动的“叠加层”不同。从本质上讲，控件只是一个在地图上具有绝对位置的 <div> 元素，该元素会向用户显示某个用户界面并处理与用户或地图的交互（通常通过事件处理程序处理）。

要创建您自己的自定义控件，并没有什么必须遵循的规则。不过，您可以将以下准则作为最佳实践来参考：

为待显示的控件元素定义适当的 CSS
针对地图属性更改或用户事件（例如 'click'' 事件），通过事件处理程序处理与用户或地图的交互
创建 <div> 元素以存储控件并将此元素添加到 Map 的 controls 属性中

下面将分别对这些问题加以说明。

绘制自定义控件

如何绘制控件由您自己决定。一般而言，我们建议您将所有的控件显示方式放在单个 <div> 元素中，以便将控件作为一个单元进行处理。我们将在下面所示的示例中使用这种设计模式。

设计具有吸引力的控件需要具备一些 CSS 和 DOM 结构方面的知识。以下代码显示了如何通过一个 <div> 容器、一个用于存储按钮轮廓的 <div> 和另一个用于存储按钮内部事项的 <div> 来创建简单的控件。

// Create a div to hold the control.
var controlDiv = document.createElement('div');

// Set CSS for the control border
var controlUI = document.createElement('div');
controlUI.style.backgroundColor = '#fff';
controlUI.style.border = '2px solid #fff';
controlUI.style.cursor = 'pointer';
controlUI.style.marginBottom = '22px';
controlUI.style.textAlign = 'center';
controlUI.title = 'Click to recenter the map';
controlDiv.appendChild(controlUI);

// Set CSS for the control interior
var controlText = document.createElement('div');
controlText.style.color = 'rgb(25,25,25)';
controlText.style.fontFamily = 'Roboto,Arial,sans-serif';
controlText.style.fontSize = '16px';
controlText.style.lineHeight = '38px';
controlText.style.paddingLeft = '5px';
controlText.style.paddingRight = '5px';
controlText.innerHTML = 'Center Map';
controlUI.appendChild(controlText);

从自定义控件处理事件

控件必须能够实际完成某些任务方为有用的控件。控件的用途由您确定。控件可以响应用户输入，也可以响应 Map 的状态变化。

为响应用户输入，Google Maps JavaScript API 提供了一个跨浏览器的事件处理方法 addDomListener()，该方法可以处理大多数受浏览器支持的 DOM 事件。以下代码段为浏览器的 'click' 事件添加了一个侦听器。请注意，此事件是从 DOM（而非地图）接收的。

// Setup the click event listener: simply set the map to center on Chicago
var chicago = {lat: 41.850, lng: -87.650};

google.maps.event.addDomListener(outer, 'click', function() {
  map.setCenter(chicago)
});

定位自定义控件

要在地图上定位自定义控件，请在 Map 对象的 controls 属性中将相应控件放在适当的位置。此属性包含 google.maps.ControlPosition 数组。您可以将 Node（通常为 <div>）添加至相应的 ControlPosition，以向地图中添加自定义控件。（有关这些位置的信息，请参阅上面的控件定位。）

每个 ControlPosition 均会存储显示在相应位置上的控件的 MVCArray。因此，当您向某位置添加或从某位置删除控件时，API 将对控件作出相应的更新。

API 会按照 index 属性的顺序分别将控件放在各自的位置上；并且索引值较低的控件的位置会较靠前。例如，BOTTOM_RIGHT 位置处的两个自定义控件将按照此索引顺序进行布局，并优先放置索引值较低的控件。默认情况下，API 会先放置所有的 API 默认控件，然后才开始放置所有自定义控件。您可以通过将控件的 index 属性设置为负值来重写此行为。自定义控件无法放置在徽标的左侧或版权的右侧。

以下代码创建了一个新的自定义控件（未显示其构造函数），并将该控件添加到地图中的 TOP_RIGHT 位置。

var map = new google.maps.Map(document.getElementById('map'), 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);

自定义控件示例

下面是一个简单的控件（尽管不是很实用），其中结合采用了上面所示的模式。该控件通过使地图在某个默认位置上居中来响应 DOM 'click' 事件：

var map;
var chicago = {lat: 41.85, lng: -87.65};

/**
 * The CenterControl adds a control to the map that recenters the map on
 * Chicago.
 * This constructor takes the control DIV as an argument.
 * @constructor
 */
function CenterControl(controlDiv, map) {

  // Set CSS for the control border.
  var controlUI = document.createElement('div');
  controlUI.style.backgroundColor = '#fff';
  controlUI.style.border = '2px solid #fff';
  controlUI.style.borderRadius = '3px';
  controlUI.style.boxShadow = '0 2px 6px rgba(0,0,0,.3)';
  controlUI.style.cursor = 'pointer';
  controlUI.style.marginBottom = '22px';
  controlUI.style.textAlign = 'center';
  controlUI.title = 'Click to recenter the map';
  controlDiv.appendChild(controlUI);

  // Set CSS for the control interior.
  var controlText = document.createElement('div');
  controlText.style.color = 'rgb(25,25,25)';
  controlText.style.fontFamily = 'Roboto,Arial,sans-serif';
  controlText.style.fontSize = '16px';
  controlText.style.lineHeight = '38px';
  controlText.style.paddingLeft = '5px';
  controlText.style.paddingRight = '5px';
  controlText.innerHTML = 'Center Map';
  controlUI.appendChild(controlText);

  // Setup the click event listeners: simply set the map to Chicago.
  controlUI.addEventListener('click', function() {
    map.setCenter(chicago);
  });

}

function initMap() {
  map = new google.maps.Map(document.getElementById('map'), {
    zoom: 12,
    center: chicago
  });

  // Create the DIV to hold the control and call the CenterControl()
  // constructor passing in this DIV.
  var centerControlDiv = document.createElement('div');
  var centerControl = new CenterControl(centerControlDiv, map);

  centerControlDiv.index = 1;
  map.controls[google.maps.ControlPosition.TOP_CENTER].push(centerControlDiv);
}

<div id="map"></div>

/* Always set the map height explicitly to define the size of the div
 * element that contains the map. */
#map {
  height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}

 <!-- Replace the value of the key parameter with your own API key. -->
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap">
</script>

var map;
var chicago = {lat: 41.85, lng: -87.65};

/**
 * The CenterControl adds a control to the map that recenters the map on
 * Chicago.
 * This constructor takes the control DIV as an argument.
 * @constructor
 */
function CenterControl(controlDiv, map) {

  // Set CSS for the control border.
  var controlUI = document.createElement('div');
  controlUI.style.backgroundColor = '#fff';
  controlUI.style.border = '2px solid #fff';
  controlUI.style.borderRadius = '3px';
  controlUI.style.boxShadow = '0 2px 6px rgba(0,0,0,.3)';
  controlUI.style.cursor = 'pointer';
  controlUI.style.marginBottom = '22px';
  controlUI.style.textAlign = 'center';
  controlUI.title = 'Click to recenter the map';
  controlDiv.appendChild(controlUI);

  // Set CSS for the control interior.
  var controlText = document.createElement('div');
  controlText.style.color = 'rgb(25,25,25)';
  controlText.style.fontFamily = 'Roboto,Arial,sans-serif';
  controlText.style.fontSize = '16px';
  controlText.style.lineHeight = '38px';
  controlText.style.paddingLeft = '5px';
  controlText.style.paddingRight = '5px';
  controlText.innerHTML = 'Center Map';
  controlUI.appendChild(controlText);

  // Setup the click event listeners: simply set the map to Chicago.
  controlUI.addEventListener('click', function() {
    map.setCenter(chicago);
  });

}

function initMap() {
  map = new google.maps.Map(document.getElementById('map'), {
    zoom: 12,
    center: chicago
  });

  // Create the DIV to hold the control and call the CenterControl()
  // constructor passing in this DIV.
  var centerControlDiv = document.createElement('div');
  var centerControl = new CenterControl(centerControlDiv, map);

  centerControlDiv.index = 1;
  map.controls[google.maps.ControlPosition.TOP_CENTER].push(centerControlDiv);
}

查看示例 (control-custom.html)。

向控件添加状态

控件还可以储存状态。下例与前面所示类似，但该控件包含了一个额外的“Set Home”按钮，它将控件设置为显示一个新首页位置。为此，我们在该控件内创建了一个 home_ 属性以存储此状态，并为该状态提供了获取函数和设置函数。

var map;
var chicago = {lat: 41.85, lng: -87.65};

/**
 * The CenterControl adds a control to the map that recenters the map on
 * Chicago.
 * @constructor
 * @param {!Element} controlDiv
 * @param {!google.maps.Map} map
 * @param {?google.maps.LatLng} center
 */
function CenterControl(controlDiv, map, center) {
  // We set up a variable for this since we're adding event listeners
  // later.
  var control = this;

  // Set the center property upon construction
  control.center_ = center;
  controlDiv.style.clear = 'both';

  // Set CSS for the control border
  var goCenterUI = document.createElement('div');
  goCenterUI.id = 'goCenterUI';
  goCenterUI.title = 'Click to recenter the map';
  controlDiv.appendChild(goCenterUI);

  // Set CSS for the control interior
  var goCenterText = document.createElement('div');
  goCenterText.id = 'goCenterText';
  goCenterText.innerHTML = 'Center Map';
  goCenterUI.appendChild(goCenterText);

  // Set CSS for the setCenter control border
  var setCenterUI = document.createElement('div');
  setCenterUI.id = 'setCenterUI';
  setCenterUI.title = 'Click to change the center of the map';
  controlDiv.appendChild(setCenterUI);

  // Set CSS for the control interior
  var setCenterText = document.createElement('div');
  setCenterText.id = 'setCenterText';
  setCenterText.innerHTML = 'Set Center';
  setCenterUI.appendChild(setCenterText);

  // Set up the click event listener for 'Center Map': Set the center of
  // the map
  // to the current center of the control.
  goCenterUI.addEventListener('click', function() {
    var currentCenter = control.getCenter();
    map.setCenter(currentCenter);
  });

  // Set up the click event listener for 'Set Center': Set the center of
  // the control to the current center of the map.
  setCenterUI.addEventListener('click', function() {
    var newCenter = map.getCenter();
    control.setCenter(newCenter);
  });
}

/**
 * Define a property to hold the center state.
 * @private
 */
CenterControl.prototype.center_ = null;

/**
 * Gets the map center.
 * @return {?google.maps.LatLng}
 */
CenterControl.prototype.getCenter = function() {
  return this.center_;
};

/**
 * Sets the map center.
 * @param {?google.maps.LatLng} center
 */
CenterControl.prototype.setCenter = function(center) {
  this.center_ = center;
};

function initMap() {
  map = new google.maps.Map(document.getElementById('map'), {
    zoom: 12,
    center: chicago
  });

  // Create the DIV to hold the control and call the CenterControl()
  // constructor
  // passing in this DIV.
  var centerControlDiv = document.createElement('div');
  var centerControl = new CenterControl(centerControlDiv, map, chicago);

  centerControlDiv.index = 1;
  centerControlDiv.style['padding-top'] = '10px';
  map.controls[google.maps.ControlPosition.TOP_CENTER].push(centerControlDiv);
}

<div id="map"></div>

/* Always set the map height explicitly to define the size of the div
 * element that contains the map. */
#map {
  height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}

#goCenterUI, #setCenterUI {
  background-color: #fff;
  border: 2px solid #fff;
  border-radius: 3px;
  box-shadow: 0 2px 6px rgba(0,0,0,.3);
  cursor: pointer;
  float: left;
  margin-bottom: 22px;
  text-align: center;
}
#goCenterText, #setCenterText {
  color: rgb(25,25,25);
  font-family: Roboto,Arial,sans-serif;
  font-size: 15px;
  line-height: 25px;
  padding-left: 5px;
  padding-right: 5px;
}
#setCenterUI {
  margin-left: 12px;
}

 <!-- Replace the value of the key parameter with your own API key. -->
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap">
</script>

var map;
var chicago = {lat: 41.85, lng: -87.65};

/**
 * The CenterControl adds a control to the map that recenters the map on
 * Chicago.
 * @constructor
 * @param {!Element} controlDiv
 * @param {!google.maps.Map} map
 * @param {?google.maps.LatLng} center
 */
function CenterControl(controlDiv, map, center) {
  // We set up a variable for this since we're adding event listeners
  // later.
  var control = this;

  // Set the center property upon construction
  control.center_ = center;
  controlDiv.style.clear = 'both';

  // Set CSS for the control border
  var goCenterUI = document.createElement('div');
  goCenterUI.id = 'goCenterUI';
  goCenterUI.title = 'Click to recenter the map';
  controlDiv.appendChild(goCenterUI);

  // Set CSS for the control interior
  var goCenterText = document.createElement('div');
  goCenterText.id = 'goCenterText';
  goCenterText.innerHTML = 'Center Map';
  goCenterUI.appendChild(goCenterText);

  // Set CSS for the setCenter control border
  var setCenterUI = document.createElement('div');
  setCenterUI.id = 'setCenterUI';
  setCenterUI.title = 'Click to change the center of the map';
  controlDiv.appendChild(setCenterUI);

  // Set CSS for the control interior
  var setCenterText = document.createElement('div');
  setCenterText.id = 'setCenterText';
  setCenterText.innerHTML = 'Set Center';
  setCenterUI.appendChild(setCenterText);

  // Set up the click event listener for 'Center Map': Set the center of
  // the map
  // to the current center of the control.
  goCenterUI.addEventListener('click', function() {
    var currentCenter = control.getCenter();
    map.setCenter(currentCenter);
  });

  // Set up the click event listener for 'Set Center': Set the center of
  // the control to the current center of the map.
  setCenterUI.addEventListener('click', function() {
    var newCenter = map.getCenter();
    control.setCenter(newCenter);
  });
}

/**
 * Define a property to hold the center state.
 * @private
 */
CenterControl.prototype.center_ = null;

/**
 * Gets the map center.
 * @return {?google.maps.LatLng}
 */
CenterControl.prototype.getCenter = function() {
  return this.center_;
};

/**
 * Sets the map center.
 * @param {?google.maps.LatLng} center
 */
CenterControl.prototype.setCenter = function(center) {
  this.center_ = center;
};

function initMap() {
  map = new google.maps.Map(document.getElementById('map'), {
    zoom: 12,
    center: chicago
  });

  // Create the DIV to hold the control and call the CenterControl()
  // constructor
  // passing in this DIV.
  var centerControlDiv = document.createElement('div');
  var centerControl = new CenterControl(centerControlDiv, map, chicago);

  centerControlDiv.index = 1;
  centerControlDiv.style['padding-top'] = '10px';
  map.controls[google.maps.ControlPosition.TOP_CENTER].push(centerControlDiv);
}

查看示例 (control-custom-state.html)。

一切就绪！

控件

控件概览

默认用户界面

禁用默认用户界面

向地图添加控件

控件选项

修改控件

控件定位

自定义控件

绘制自定义控件

从自定义控件处理事件

定位自定义控件

自定义控件示例

向控件添加状态

发送以下问题的反馈：

一切就绪！

激活 Google Maps JavaScript API

控件

控件概览

默认用户界面

禁用默认用户界面

向地图添加控件

控件选项

修改控件

控件定位

自定义控件

绘制自定义控件

从自定义控件处理事件

定位自定义控件

自定义控件示例

向控件添加状态

发送以下问题的反馈：