控件

请选择平台： Android iOS JavaScript

控件概览

通过 Maps JavaScript API 显示的地图包含界面元素，可方便用户与地图互动。这些元素称为“控件”，您可以在应用中加入这些控件的各种变体。或者，您也可以放手让 Maps JavaScript API 处理所有控件行为。

以下地图显示了 Maps JavaScript API 会默认显示的一组控件：

从左上角开始顺时针旋转：地图类型、全屏、相机、街景、键盘快捷键。

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

地图类型控件：具有下拉菜单和水平按钮栏两种样式可供选择，让用户能够选择地图类型（ROADMAP、SATELLITE、HYBRID 或 TERRAIN）。此控件默认显示在地图左上角。
全屏控件：可提供以全屏模式打开地图的选项。在桌面设备和移动设备上，此控件默认处于启用状态。注意：iOS 不支持全屏功能。因此，全屏控件在 iOS 设备上不可见。
相机控制功能包含缩放和平移控制。
街景控件：包含一个街景小人图标，将该图标拖动到地图上即可启用街景。此控件默认显示在靠近地图右下角的位置。
旋转控件：可为包含 3D 图像的地图提供倾斜和旋转选项组合。此控件默认显示在靠近地图右下角的位置。如需了解详情，请参阅 3D 概览。
比例尺控件：可显示地图比例尺元素。此控件默认处于停用状态。
键盘快捷键控件：可显示用于与地图互动的键盘快捷键列表。

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

默认情况下，系统并不会启用所有这些控件。要了解默认界面行为及其修改方法，请参阅下面的默认界面。

默认界面

默认情况下，如果地图过小 (200x200px)，所有控件都不会显示。若要替换掉此行为，您可以将控件显式设置为可见。请参阅向地图添加控件。

控件的行为和显示方式在移动设备和桌面设备上相同，但全屏控件除外（请参阅控件列表中介绍的行为）。

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

停用默认界面

您可能希望完全关闭 API 的默认界面按钮。为此，请将地图的 disableDefaultUI 属性（在 MapOptions 对象内）设置为 true。此属性可停用来自 Maps JavaScript API 的所有界面控件按钮。不过，这不会影响基本地图上的鼠标手势或键盘快捷键，它们分别由 gestureHandling 和 keyboardShortcuts 属性控制。

以下代码可停用界面按钮：

TypeScript

innerMap.setOptions({
    // Disable the default UI.
    disableDefaultUI: true,
});index.ts

JavaScript

innerMap.setOptions({
    // Disable the default UI.
    disableDefaultUI: true,
});index.js

查看示例

试用示例

JSFiddle.net

向地图添加控件

您可能需要通过移除、添加或修改用户界面行为或控件来定制您的界面，并确保未来的更新不会改变这种行为。如果您只想添加或修改现有行为，则需要确保将控件显式添加到您的应用程序中。

有些控件默认显示在地图上，而有些控件只有在您明确要求时才会显示。为地图添加或移除控件都是通过 MapOptions 对象的以下字段指定的，设置为 true 可以显示相应控件，设置为 false 可以隐藏相应控件：

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

默认情况下，如果地图小于 200x200px，所有控件都不会显示。若要替换掉此行为，您可以将控件显式设置为可见。例如，下表显示了相机控件在采用不同地图尺寸和 cameraControl 字段设置时的可见性：

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

以下示例会将地图设置为隐藏相机控件，显示比例尺控件。请注意，我们并未显式停用默认界面，因此这些修改只是对默认界面行为的补充。

TypeScript

innerMap.setOptions({
    cameraControl: false,
    scaleControl: true,
});index.ts

JavaScript

innerMap.setOptions({
    cameraControl: false,
    scaleControl: true,
});index.js

查看示例

试用示例

JSFiddle.net

控件选项

有些控件是可以配置的，您可以更改其行为或显示方式。例如，地图类型控件能够以水平栏或下拉菜单的形式显示。

您可以在创建地图时更改 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
  }
  ...

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

TypeScript

innerMap.setOptions({
    mapTypeControl: true,
    mapTypeControlOptions: {
        style: google.maps.MapTypeControlStyle.DROPDOWN_MENU,
        mapTypeIds: [
            google.maps.MapTypeId.ROADMAP,
            google.maps.MapTypeId.TERRAIN,
        ],
        position: google.maps.ControlPosition.TOP_CENTER,
    },
});index.ts

JavaScript

innerMap.setOptions({
    mapTypeControl: true,
    mapTypeControlOptions: {
        style: google.maps.MapTypeControlStyle.DROPDOWN_MENU,
        mapTypeIds: [
            google.maps.MapTypeId.ROADMAP,
            google.maps.MapTypeId.TERRAIN,
        ],
        position: google.maps.ControlPosition.TOP_CENTER,
    },
});index.js

查看示例

试用示例

JSFiddle.net

控件通常是在创建地图时配置的。但您可以调用 Map 的 setOptions() 方法并为其传递新的控件选项，借此动态更改控件的显示方式。

修改控件

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

cameraControl：可启用/停用相机控制功能，该功能可让用户缩放和平移地图。此控件默认在所有地图上显示。 cameraControlOptions 字段可进一步指定要用于此控件的 CameraControlOptions。
mapTypeControl：可启用/停用地图类型控件，该控件可让用户在不同的地图类型（如“地图”和“卫星图像”）之间切换。默认情况下，此控件可见并显示在地图左上角。mapTypeControlOptions 字段可进一步指定要用于此控件的 MapTypeControlOptions。
streetViewControl：可启用/停用街景小人控件，该控件可让用户激活街景全景图片。默认情况下，此控件可见并显示在地图右下角附近。streetViewControlOptions 字段可进一步指定要用于此控件的 StreetViewControlOptions。
rotateControl：可显示/取消显示旋转控件，该控件可控制 3D 图像的方向。默认情况下，该控件是否显示取决于给定地图类型在当前的缩放级别和位置上是否存在 3D 图像。您可以设置地图的 rotateControlOptions，以指定要使用的 RotateControlOptions，从而更改该控件的行为。该控件仅会显示在 3D 基本地图上。
scaleControl：可启用/停用比例尺控件，该控件可提供地图比例尺。此控件默认不可见。启用后，它将始终显示在地图右下角。scaleControlOptions 可进一步指定要用于此控件的 ScaleControlOptions。
fullscreenControl：可启用/停用以全屏模式打开地图的控件。默认情况下，桌面设备和 Android 设备上会默认启用此控件。启用后，此控件会显示在靠近地图右上角的位置。fullscreenControlOptions 可进一步指定要用于此控件的 FullscreenControlOptions。

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

控件定位

大多数控件选项都包含一个 position 属性（类型为 ControlPosition），该属性用于指明要将相应控件放在地图上的哪个位置。这些控件的定位并不是绝对的；相反，API 将通过使控件在给定约束（例如地图尺寸）内围绕现有地图元素或其他控件“流动”，以智能方式安排控件布局。

控制位置有两种类型：旧版和逻辑。建议使用逻辑值，以便能够自动支持从左到右 (LTR) 和从右到左 (RTL) 的布局上下文。请参阅参考指南。

下表显示了在从左到右 (LTR) 和从右到左 (RTL) 上下文中支持的控件位置。

从左到右的位置

位置（从左到右的上下文）	逻辑常量（推荐）	旧版常量
左上	`BLOCK_START_INLINE_START`	`TOP_LEFT`
顶部中心	`BLOCK_START_INLINE_CENTER`	`TOP_CENTER`
右上角	`BLOCK_START_INLINE_END`	`TOP_RIGHT`
左上	`INLINE_START_BLOCK_START`	`LEFT_TOP`
左中	`INLINE_START_BLOCK_CENTER`	`LEFT_CENTER`
左下	`INLINE_START_BLOCK_END`	`LEFT_BOTTOM`
右上角	`INLINE_END_BLOCK_START`	`RIGHT_TOP`
右中	`INLINE_END_BLOCK_CENTER`	`RIGHT_CENTER`
右下	`INLINE_END_BLOCK_END`	`RIGHT_BOTTOM`
左下	`BLOCK_END_INLINE_START`	`BOTTOM_LEFT`
底部居中	`BLOCK_END_INLINE_CENTER`	`BOTTOM_CENTER`
右下角	`BLOCK_END_INLINE_END`	`BOTTOM_RIGHT`

RTL 位置

位置（从右到左的上下文）	逻辑常量（推荐）	旧版常量
右上角	`BLOCK_START_INLINE_START`	`TOP_RIGHT`
顶部中心	`BLOCK_START_INLINE_CENTER`	`TOP_CENTER`
左上	`BLOCK_START_INLINE_END`	`TOP_LEFT`
右上角	`INLINE_START_BLOCK_START`	`RIGHT_TOP`
右中	`INLINE_START_BLOCK_CENTER`	`RIGHT_CENTER`
右下	`INLINE_START_BLOCK_END`	`RIGHT_BOTTOM`
左上	`INLINE_END_BLOCK_START`	`LEFT_TOP`
左中	`INLINE_END_BLOCK_CENTER`	`LEFT_CENTER`
左下	`INLINE_END_BLOCK_END`	`LEFT_BOTTOM`
右下角	`BLOCK_END_INLINE_START`	`BOTTOM_RIGHT`
底部居中	`BLOCK_END_INLINE_CENTER`	`BOTTOM_CENTER`
左下	`BLOCK_END_INLINE_END`	`BOTTOM_LEFT`

点击标签可在 LTR 模式和 RTL 模式之间切换地图。

请注意，这些位置可能会与界面元素的位置重叠，而您无法修改界面元素（如版权信息和 Google 徽标）的位置。在这种情况下，控件将根据每个位置的逻辑说明“流动”，并尽可能靠近其指定位置显示。虽然 API 会尝试以智能方式排列控件，但如果布局较为复杂，则不能保证控件不会叠加。

以下示例将显示一张基本地图，其中启用了位于不同位置的所有控件。

TypeScript

function initMap(): void {
  const map = new google.maps.Map(
    document.getElementById("map") as HTMLElement,
    {
      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,
    }
  );
}

declare global {
  interface Window {
    initMap: () => void;
  }
}
window.initMap = initMap;index.ts

JavaScript

function initMap() {
  const 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,
  });
}

window.initMap = initMap;index.js

查看示例

试用示例

JSFiddle.net Google Cloud Shell

自定义控件

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

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

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

下面将分别对上述准则加以说明。

绘制自定义控件

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

设计具有吸引力的控件需要具备一些 CSS 和 DOM 结构方面的知识。以下代码示例展示了如何使用声明性 HTML 和程序化方法添加自定义控件。

声明式 CSS

以下 CSS 样式可提供与默认控件一致的外观。将这些样式应用于以下两个示例：

.streetview-toggle-button {
  align-items: center;
  background: white;
  border: none;
  border-radius: 2px;
  box-shadow: 0 1px 4px -1px rgba(0, 0, 0, 0.3);
  color: rgb(86, 86, 86);
  cursor: pointer;
  display: flex;
  font-family: Roboto, Arial, sans-serif;
  font-size: 18px;
  font-weight: 400;
  height: 40px;
  justify-content: center;
  margin: 10px 0;
  padding: 0 17px;
}

.streetview-toggle-button:hover {
  background: #f4f4f4;
  color: #000;
}

声明式 HTML

以下代码段展示了如何以声明方式创建自定义控件。在 HTML 中，ID 为 container 的 DIV 用于定位控件；该 DIV 嵌套在 gmp-map 元素中，按钮已添加到该 DIV。slot 属性设置为 control-inline-start-block-start，以便将控件定位在地图的左上角。

<gmp-map
  center="41.027748173921374, -92.41852445367961"
  zoom="13"
  map-id="DEMO_MAP_ID">
  <div id="container" slot="control-inline-start-block-start">
    <input type="button"
    id="streetview-toggle-button"
    class="button"
    value="Click this button" />
  </div>
</gmp-map>

在 JavaScript 中，getElementById() 用于查找 DIV 和按钮，事件监听器会添加到按钮，并且按钮会附加到 DIV。

// Create a DIV to attach the control UI to the Map.
const container = document.getElementById("container");

// Get the control button from the HTML page.
const controlButton = document.getElementById("streetview-toggle-button");

// Add a click event listener.
controlButton.addEventListener("click", () => {
  window.alert("You clicked the button!");
});

// Add the control to the DIV.
container.append(controlButton);

程序化 JavaScript

此代码段演示了如何以编程方式创建按钮控件。 CSS 样式在上面定义。

// Create a DIV to attach the control UI to the Map.
const container = document.getElementById("container");

// Position the control in the top left corner of the map.
container.slot = "control-block-start-inline-start";

// Create the control.
const controlButton = document.createElement("button");
controlButton.classList.add("streetview-toggle-button");
controlButton.textContent = "Click this button";
controlButton.type = "button";

// Add a click event listener.
controlButton.addEventListener("click", () => {
  window.alert("You clicked the button!");
});

// Add the control to the DIV.
container.append(controlButton);

通过自定义控件处理事件

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

如需响应用户输入，请使用 addEventListener()，该方法可处理受支持的 DOM 事件。以下代码段将针对浏览器的 'click' 事件添加一个监听器。请注意，此事件是从 DOM（而非地图）接收的。

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

controlButton.addEventListener('click', () => {
  map.setCenter(chicago);
});

使自定义控件可供访问

为确保控件能够接收键盘事件并正确显示在屏幕阅读器中，请注意以下两点：

对于按钮、表单元素和标签，始终使用原生 HTML 元素。仅将 DIV 元素用作容器来存储原生控件；切勿将 DIV 元素改作互动式界面元素。
在适当的情况下，使用 label 元素、title 属性或 aria-label 属性提供有关界面元素的信息。

定位自定义控件

使用 slot 属性可定位自定义控件，并指定所需的控件位置。如需了解这些位置，请参阅上面的控件定位。

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

以下代码将创建一个新的自定义控件（未显示其构造函数），并将该控件添加到地图的 BLOCK_START_INLINE_END 位置（在 LTR 上下文中为右上角）。

// Create a DIV to attach the control UI to the Map.
const centerControlDiv = document.createElement("div");

// Create the control. This code calls a function that
// creates a new instance of a button control.
const centerControl = createCenterControl(map);

// Append the control to the DIV.
centerControlDiv.appendChild(centerControl);

// Push the control to the BLOCK_START_INLINE_END position.
innerMap.controls[google.maps.ControlPosition.BLOCK_START_INLINE_END].push(centerControlDiv);

如需以声明方式为自定义控件设置位置，请在 HTML 中设置 slot 属性：

<gmp-map center="30.72851568848909, -81.54675994068873" zoom="12">
  <div slot="control-block-start-inline-end">
    <!-- Control HTML -->
  </div>
</gmp-map>

自定义控件示例

下面是一个简单的控件（尽管不太实用），它结合采用了上面所示的模式。该控件会将地图中心设为某个默认位置，从而响应 DOM 'click' 事件：

TypeScript

let map: google.maps.Map;

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

/**
 * Creates a control that recenters the map on Chicago.
 */
 function createCenterControl(map) {
  const controlButton = document.createElement('button');

  // Set CSS for the control.
  controlButton.style.backgroundColor = '#fff';
  controlButton.style.border = '2px solid #fff';
  controlButton.style.borderRadius = '3px';
  controlButton.style.boxShadow = '0 2px 6px rgba(0,0,0,.3)';
  controlButton.style.color = 'rgb(25,25,25)';
  controlButton.style.cursor = 'pointer';
  controlButton.style.fontFamily = 'Roboto,Arial,sans-serif';
  controlButton.style.fontSize = '16px';
  controlButton.style.lineHeight = '38px';
  controlButton.style.margin = '8px 0 22px';
  controlButton.style.padding = '0 5px';
  controlButton.style.textAlign = 'center';

  controlButton.textContent = 'Center Map';
  controlButton.title = 'Click to recenter the map';
  controlButton.type = 'button';

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

  return controlButton;
}

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

  // Create the DIV to hold the control.
  const centerControlDiv = document.createElement('div');
  // Create the control.
  const centerControl = createCenterControl(map);
  // Append the control to the DIV.
  centerControlDiv.appendChild(centerControl);

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

declare global {
  interface Window {
    initMap: () => void;
  }
}
window.initMap = initMap;index.ts

JavaScript

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

/**
 * Creates a control that recenters the map on Chicago.
 */
function createCenterControl(map) {
  const controlButton = document.createElement("button");

  // Set CSS for the control.
  controlButton.style.backgroundColor = "#fff";
  controlButton.style.border = "2px solid #fff";
  controlButton.style.borderRadius = "3px";
  controlButton.style.boxShadow = "0 2px 6px rgba(0,0,0,.3)";
  controlButton.style.color = "rgb(25,25,25)";
  controlButton.style.cursor = "pointer";
  controlButton.style.fontFamily = "Roboto,Arial,sans-serif";
  controlButton.style.fontSize = "16px";
  controlButton.style.lineHeight = "38px";
  controlButton.style.margin = "8px 0 22px";
  controlButton.style.padding = "0 5px";
  controlButton.style.textAlign = "center";
  controlButton.textContent = "Center Map";
  controlButton.title = "Click to recenter the map";
  controlButton.type = "button";
  // Setup the click event listeners: simply set the map to Chicago.
  controlButton.addEventListener("click", () => {
    map.setCenter(chicago);
  });
  return controlButton;
}

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

  // Create the DIV to hold the control.
  const centerControlDiv = document.createElement("div");
  // Create the control.
  const centerControl = createCenterControl(map);

  // Append the control to the DIV.
  centerControlDiv.appendChild(centerControl);
  map.controls[google.maps.ControlPosition.TOP_CENTER].push(centerControlDiv);
}

window.initMap = initMap;index.js

查看示例

试用示例

JSFiddle.net Google Cloud Shell

向控件添加状态

控件也可以存储状态。以下示例与上述示例类似，但该控件包含了一个额外的“设置住址”按钮，该按钮可将控件设置为显示新的住址位置。为此，我们在该控件内创建了一个 home_ 属性以存储此状态，并为该状态提供了 getter 和 setter。

TypeScript

let map: google.maps.Map;

const chicago: google.maps.LatLngLiteral = { lat: 41.85, lng: -87.65 };

/**
 * The CenterControl adds a control to the map that recenters the map on
 * Chicago.
 */
class CenterControl {
  private map_: google.maps.Map;
  private center_: google.maps.LatLng;
  constructor(
    controlDiv: HTMLElement,
    map: google.maps.Map,
    center: google.maps.LatLngLiteral
  ) {
    this.map_ = map;
    // Set the center property upon construction
    this.center_ = new google.maps.LatLng(center);
    controlDiv.style.clear = "both";

    // Set CSS for the control border
    const goCenterUI = document.createElement("button");

    goCenterUI.id = "goCenterUI";
    goCenterUI.title = "Click to recenter the map";
    controlDiv.appendChild(goCenterUI);

    // Set CSS for the control interior
    const goCenterText = document.createElement("div");

    goCenterText.id = "goCenterText";
    goCenterText.innerHTML = "Center Map";
    goCenterUI.appendChild(goCenterText);

    // Set CSS for the setCenter control border
    const setCenterUI = document.createElement("button");

    setCenterUI.id = "setCenterUI";
    setCenterUI.title = "Click to change the center of the map";
    controlDiv.appendChild(setCenterUI);

    // Set CSS for the control interior
    const 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", () => {
      const currentCenter = this.center_;

      this.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", () => {
      const newCenter = this.map_.getCenter()!;

      if (newCenter) {
        this.center_ = newCenter;
      }
    });
  }
}

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

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

  // @ts-ignore
  centerControlDiv.index = 1;
  centerControlDiv.style.paddingTop = "10px";
  map.controls[google.maps.ControlPosition.TOP_CENTER].push(centerControlDiv);
}

declare global {
  interface Window {
    initMap: () => void;
  }
}
window.initMap = initMap;index.ts

JavaScript

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

/**
 * The CenterControl adds a control to the map that recenters the map on
 * Chicago.
 */
class CenterControl {
  map_;
  center_;
  constructor(controlDiv, map, center) {
    this.map_ = map;
    // Set the center property upon construction
    this.center_ = new google.maps.LatLng(center);
    controlDiv.style.clear = "both";

    // Set CSS for the control border
    const goCenterUI = document.createElement("button");

    goCenterUI.id = "goCenterUI";
    goCenterUI.title = "Click to recenter the map";
    controlDiv.appendChild(goCenterUI);

    // Set CSS for the control interior
    const goCenterText = document.createElement("div");

    goCenterText.id = "goCenterText";
    goCenterText.innerHTML = "Center Map";
    goCenterUI.appendChild(goCenterText);

    // Set CSS for the setCenter control border
    const setCenterUI = document.createElement("button");

    setCenterUI.id = "setCenterUI";
    setCenterUI.title = "Click to change the center of the map";
    controlDiv.appendChild(setCenterUI);

    // Set CSS for the control interior
    const 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", () => {
      const currentCenter = this.center_;

      this.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", () => {
      const newCenter = this.map_.getCenter();

      if (newCenter) {
        this.center_ = newCenter;
      }
    });
  }
}

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.
  const centerControlDiv = document.createElement("div");
  const control = new CenterControl(centerControlDiv, map, chicago);

  // @ts-ignore
  centerControlDiv.index = 1;
  centerControlDiv.style.paddingTop = "10px";
  map.controls[google.maps.ControlPosition.TOP_CENTER].push(centerControlDiv);
}

window.initMap = initMap;index.js

查看示例

试用示例

JSFiddle.net Google Cloud Shell

控件 使用集合让一切井井有条 根据您的偏好保存内容并对其进行分类。

控件概览

默认界面

停用默认界面

TypeScript

JavaScript

试用示例

向地图添加控件

TypeScript

JavaScript

试用示例

控件选项

TypeScript

JavaScript

试用示例

修改控件

控件定位

从左到右的位置

RTL 位置

TypeScript

JavaScript

试用示例

自定义控件

绘制自定义控件

声明式 CSS

声明式 HTML

程序化 JavaScript

通过自定义控件处理事件

使自定义控件可供访问

定位自定义控件

自定义控件示例

TypeScript

JavaScript

试用示例

向控件添加状态

TypeScript

JavaScript

试用示例

控件