控件

请选择平台： Android iOS JavaScript

控件概览

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

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

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

  • 缩放控件：可显示“+”和“-”按钮，用于更改地图的缩放级别。此控件默认显示在地图右下角。
  • 相机控件同时具有缩放和平移控件，并且在使用Beta 版渠道时，系统会默认显示该控件来替代缩放控件。
  • 地图类型控件：具有下拉菜单和水平按钮栏两种样式可供选择，让用户能够选择地图类型（ROADMAP、SATELLITE、HYBRID 或 TERRAIN）。此控件默认显示在地图左上角。
  • 街景控件：包含一个街景小人图标，将该图标拖动到地图上即可启用街景。此控件默认显示在靠近地图右下角的位置。
  • 旋转控件：可为包含倾斜图像的地图提供倾斜和旋转选项组合。此控件默认显示在靠近地图右下角的位置。有关详情，请参见 45° 角航拍图像。
  • 比例尺控件：可显示地图比例尺元素。此控件默认处于停用状态。
  • 全屏控件：可提供以全屏模式打开地图的选项。在桌面设备和移动设备上，此控件默认处于启用状态。注意：iOS 不支持全屏功能。因此，全屏控件在 iOS 设备上不可见。
  • 键盘快捷键控件：可显示用于与地图互动的键盘快捷键列表。

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

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

默认界面

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

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

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

停用默认界面

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

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

TypeScript

function initMap(): void {
  const map = new google.maps.Map(
    document.getElementById("map") as HTMLElement,
    {
      zoom: 4,
      center: { lat: -33, lng: 151 },
      disableDefaultUI: 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: 4,
    center: { lat: -33, lng: 151 },
    disableDefaultUI: true,
  });
}

window.initMap = initMap;
index.js
查看示例

试用示例

向地图添加控件

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

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

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

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

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

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

TypeScript

function initMap(): void {
  const map = new google.maps.Map(
    document.getElementById("map") as HTMLElement,
    {
      zoom: 4,
      center: { lat: -33, lng: 151 },
      zoomControl: false,
      scaleControl: 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: 4,
    center: { lat: -33, lng: 151 },
    zoomControl: false,
    scaleControl: true,
  });
}

window.initMap = initMap;
index.js
查看示例

试用示例

控件选项

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

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

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

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

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

JavaScript

// You can set control options to change the default position or style of many
// of the map controls.
function initMap() {
  const 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"],
    },
  });
}

window.initMap = initMap;
index.js
查看示例

试用示例

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

修改控件

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

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

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

控件定位

大多数控件选项都包含一个 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 徽标）的位置。在这种情况下，控件将根据每个位置的逻辑说明“流动”，并尽可能靠近其指定位置显示。

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

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
查看示例

试用示例

自定义控件

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

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

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

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

绘制自定义控件

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

设计具有吸引力的控件需要具备一些 CSS 和 DOM 结构方面的知识。以下代码显示了一个函数，用以创建按钮元素，该按钮可平移地图，使其以芝加哥为中心。

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;
}

通过自定义控件处理事件

控件必须能够实际完成某些任务，才是有用的控件。控件的用途由您确定。控件可以响应用户输入，也可以响应 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 属性提供有关界面元素的信息。

定位自定义控件

若要在地图上定位自定义控件，请在 Map 对象的 controls 属性中将相应控件放在适当的位置。此属性包含一个 google.maps.ControlPosition 数组。您可以通过向相应的 ControlPosition 添加 Node（通常是 <div>）来向地图添加自定义控件。（如需了解这些位置，请参阅上面的控件定位。）

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

API 会按照 index 属性的顺序在每个位置放置控件，并会首先放置索引值较低的控件。例如，系统会按照此索引顺序对 BOTTOM_RIGHT 位置处的两个自定义控件进行布局，并优先放置索引值较低的控件。默认情况下，API 会先放置所有的 API 默认控件，然后再放置所有自定义控件。若要替换掉此行为，您可以将控件的 index 属性设置为一个负值。自定义控件无法放置在徽标的左侧或版权信息的右侧。

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

var map = new google.maps.Map(document.getElementById('map'), mapOptions);

// 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);

// 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_CENTER].push(centerControlDiv);

自定义控件示例

下面是一个简单的控件（尽管不太实用），它结合采用了上面所示的模式。该控件会将地图中心设为某个默认位置，从而响应 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
查看示例

试用示例

向控件添加状态

控件也可以存储状态。以下示例与上述示例类似，但该控件包含了一个额外的“设置住址”按钮，该按钮可将控件设置为显示新的住址位置。为此，我们在该控件内创建了一个 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
查看示例

试用示例