控件

选择平台Android iOS JavaScript

控件概览

通过 Maps JavaScript API 显示的地图包含允许用户与地图互动的界面元素。这些元素称为“控件”,您可以在应用中包含这些控件的多种组合。或者,您也可以不采取任何行动,让 Maps JavaScript API 处理所有控件行为。

以下地图显示了 Maps JavaScript API 显示的默认控件集:

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

  • 缩放控件会显示“+”和“-”按钮,用于更改地图的缩放级别。默认情况下,此控件会显示在地图的右下角。
  • 地图类型控件,有下拉菜单或水平按钮栏样式,可供用户选择地图类型(ROADMAPSATELLITEHYBRIDTERRAIN)。此控件默认显示在地图左上角。
  • 街景控件,包含一个街景小人图标,将该图标拖动到地图上即可启用街景。此控件默认显示在地图右下角附近。
  • 旋转控件为包含倾斜图像的地图提供了倾斜和旋转选项组合。此控件默认显示在地图右下角附近。如需了解详情,请参阅 45° 图像
  • 比例控件,用于显示地图比例元素。此控件默认处于禁用状态。
  • 全屏控件提供以全屏模式打开地图的选项。在桌面设备和移动设备上,此控件默认处于启用状态。注意:iOS 不支持全屏功能。因此,全屏控件在 iOS 设备上不可见。
  • 键盘快捷键控件会显示用于与地图互动的键盘快捷键列表。

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

默认情况下,系统并不会启用所有这些控件。如需了解默认界面行为(以及如何修改此类行为),请参阅下文中的默认界面

默认 UI

默认情况下,如果地图过小 (200x200px),所有控件都会消失。您可以通过将控件显式设置为可见来替换此行为。请参阅向地图添加控件

控件的行为和外观在移动设备和桌面设备上相同,但全屏控件除外(请参阅控件列表中介绍的行为)。

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

禁用默认 UI

您可能需要彻底关闭 API 的默认界面按钮。为此,请将地图的 disableDefaultUI 属性设置为(在 MapOptions 对象中)true。此属性会停用 Maps JavaScript API 中的任何界面控制按钮。不过,这不会影响基本地图上的鼠标手势或键盘快捷键,它们分别由 gestureHandlingkeyboardShortcuts 属性控制。

以下代码会停用界面按钮:

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;

JavaScript

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

window.initMap = initMap;
查看示例

试用示例

向地图添加控件

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

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

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

默认情况下,如果地图小于 200x200 像素,所有控件都将消失。您可以通过将控件显式设置为可见来替换此行为。例如,下表显示了根据地图大小和 zoomControl 字段的设置,缩放控件是否可见:

地图尺寸 zoomControl 可见?
不限 false
不限 true
>= 200 x 200 像素 undefined
200x200 像素 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;

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

试用示例

控件选项

有些控件是可配置的,允许您更改其行为或外观。例如,地图类型控件可能会显示为水平条或下拉菜单。

如需修改这些控件,请在创建地图时更改 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;

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

试用示例

控件通常是在创建地图后进行配置的。不过,您可以通过调用 MapsetOptions() 方法并向其传递新的控件选项,动态更改控件的显示效果。

修改控件

您通过地图的 MapOptions 对象中的字段创建地图时,指定控件的呈现形式。这些字段表示如下:

  • zoomControl 用于启用/停用缩放控件。默认情况下,此控件会显示在地图右下角附近。zoomControlOptions 字段会进一步指定要用于此控件的 ZoomControlOptions
  • 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_LEFTBOTTOM_LEFT 位置的中心。
  • RIGHT_CENTER,表示控件应沿着地图右侧放置,位于 TOP_RIGHTBOTTOM_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;

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

试用示例

自定义控件

除了修改现有 API 控件的样式和位置之外,您还可以创建自己的控件来处理与用户的互动。控件是固定的微件,会悬浮在地图之上的绝对位置;而“叠加层”则会随下面的地图一起移动。从本质上讲,控件是一个 <div> 元素,该元素在地图上具有绝对位置,会向用户显示某个界面并处理与用户或地图的互动(通常通过事件处理程序进行处理)。

要创建您自己的自定义控件,几乎不需要创建规则。但是,以下指南可作为最佳实践:

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

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

绘制自定义控件

如何绘制控件由您自己决定。一般而言,我们建议您将所有控件呈现放在一个 <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 数组。您可以通过将 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);

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

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

试用示例

向控件添加状态

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

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("div");

    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("div");

    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;

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("div");

    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("div");

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

试用示例