控制項

選取平台： Android iOS JavaScript

控制項總覽

透過 Maps JavaScript API 顯示的地圖包含 UI 元素，可讓使用者與地圖互動。這些元素稱為「控制項」，您可以在應用程式中加入這些控制項的變化版本。或者，您也可以不進行任何操作，讓 Maps JavaScript API 處理所有控制項行為。

以下為透過 Maps JavaScript API 顯示的地圖預設控制項組合：

從左上角開始順時針方向：地圖類型、全螢幕、攝影機、街景服務、鍵盤快速鍵。

以下列出了可在地圖中使用的所有控制項：

「地圖類型控制項」提供下拉式選單或水平按鈕列兩種樣式，可讓使用者選擇地圖類型 (ROADMAP、SATELLITE、HYBRID 或 TERRAIN)。根據預設，這個控制項會顯示在地圖左上角。
「全螢幕控制項」提供以全螢幕模式開啟地圖的選項。電腦和行動裝置預設會啟用這個控制項。注意：iOS 裝置不支援全螢幕功能，因此不會顯示全螢幕控制項。
攝影機控制功能提供縮放和平移控制項。
「街景服務控制項」包含衣夾人圖示，可拖曳到地圖上啟用街景服務。根據預設，這個控制項會顯示在地圖右下方附近。
「旋轉控制項」為包含 3D 圖像的地圖提供一組傾斜和旋轉選項。根據預設，這個控制項會顯示在地圖右下方附近。詳情請參閱「3D 總覽」。
「比例尺控制項」會顯示地圖比例尺元素，且預設為停用。
「鍵盤快速鍵控制項」會列出可與地圖互動的鍵盤快速鍵。

您無法直接存取或變更這些地圖控制項，但可以修改地圖的 MapOptions 欄位，這些欄位會影響控制項的顯示設定和呈現方式。您可以在執行地圖個體化時 (使用適當的 MapOptions) 調整控制項的呈現方式，也可以呼叫 setOptions() 變更地圖的選項，藉此動態修改地圖。

在預設情況下，並非所有控制項都會啟用。如要瞭解預設的 UI 行為 (以及如何修改這類行為)，請參閱下方的「預設 UI」一節。

預設 UI

根據預設，如果地圖太小 (200 x 200 像素)，所有控制項都會隱藏。如要覆寫這項行為，您可以明確將控制項設為可見。請參閱「在地圖中加入控制項」一節。

除了全螢幕控制項以外，其他控制項的行為及外觀在行動裝置和電腦裝置上都相同 (請參閱控制項清單中說明的行為)。

此外，所有裝置都會預設啟用鍵盤處理功能。

禁用預設使用者介面

您可能需要完全關閉 API 的預設 UI 按鈕。方法很簡單，只要將地圖的 disableDefaultUI 屬性 (位於 MapOptions 物件內) 設為 true 即可。這個屬性會停用來自 Maps JavaScript API 的所有 UI 控制項按鈕，但不會影響基本地圖上的滑鼠手勢或鍵盤快速鍵 (分別由 gestureHandling 和 keyboardShortcuts 屬性控制)。

下列程式碼會停用 UI 按鈕：

TypeScript

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

JavaScript

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

查看範例

試用範例

JSFiddle.net

在地圖中加入控制項

您可以移除、新增或修改 UI 行為或控制項，以自行打造專屬介面，並確保日後更新不會影響這項行為。如果您只想新增或修改現有行為，則必須確認控制項已明確加進應用程式。

有些控制項預設會顯示在地圖上，有些則需要您明確提出要求才會顯示。要在地圖上新增還是移除控制項，取決於下列 MapOptions 物件的欄位，這些欄位只要設為 true 就能顯示，設為 false 則可隱藏：

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

根據預設，如果地圖小於 200 x 200 像素，所有控制項都會隱藏。如要覆寫這項行為，您可以明確將控制項設為可見。舉例來說，下表顯示在不同地圖尺寸和 cameraControl 欄位的設定中，攝影機控制項是否可見。

地圖尺寸	`cameraControl`	是否可見？
不限	`false`	否
不限	`true`	是
>= 200 x 200 像素	`undefined`	是
< 200 x 200 像素	`undefined`	否

下例將地圖設為隱藏「攝影機」控制項，以及顯示「比例尺」控制項。請注意，我們沒有明確停用預設 UI，因此這些修改會外加到預設 UI 行為。

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) 環境中支援的控制項位置。

LTR 位置

位置 (由左至右的環境)	邏輯常數 (建議)	舊版常數
左上方	`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) 模式之間切換地圖。

請注意，這些位置可能會與 UI 元素 (例如版權和 Google 標誌) 的位置重疊，您無法修改 UI 元素的位置。在這些情況下，控制項會根據每個位置的邏輯排列，且盡可能靠近指定的位置。如果配置很複雜，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 控制項的樣式和位置，您還能自行建立控制項來處理與使用者的互動。控制項是定點小工具，浮動於地圖上方的絕對位置，與會隨著基礎地圖移動的「疊加層」不同。簡而言之，控制項是一種在地圖上具有絕對位置的 <div> 元素，除了會向使用者顯示 UI 以外，通常還會透過事件處理常式處理與使用者或地圖的互動。

如要自行建立控制項，您必須遵守幾項規定。不過，您可以將下列指南視為最佳做法：

針對要顯示的控制項元素，定義適當的 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 改為互動式 UI 元素。
視情況使用 label 元素、title 屬性或 aria-label 屬性，提供 UI 元素相關資訊。

設定自訂控制項位置

使用 slot 屬性來定位自訂控件，指定所需的控制項位置。有關這些位置的信息，請參閱上面的控制定位。

每個 ControlPosition 都會儲存顯示於該位置的控制項 MVCArray。因此，當您在該位置新增或移除控制項時，API 也會隨之更新控制項。

以下程式碼建立了一個新的自訂控制項（未顯示其建構函式），並將其新增至地圖的 BLOCK_START_INLINE_END 位置（從左到右上下文的右上角）。

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

控制項 透過集合功能整理內容 你可以依據偏好儲存及分類內容。

控制項總覽

預設 UI

禁用預設使用者介面

TypeScript

JavaScript

試用範例

在地圖中加入控制項

TypeScript

JavaScript

試用範例

控制項選項

TypeScript

JavaScript

試用範例

修改控件

設定控制項位置

LTR 位置

RTL 位置

TypeScript

JavaScript

測試範例程式碼

自訂控制項

繪製自訂控制項

宣告式 CSS

宣告式 HTML

程式輔助 JavaScript

透過自訂控制項處理事件

將自訂控制項設計為易於讀取

設定自訂控制項位置

自訂控制項範例

TypeScript

JavaScript

測試範例程式碼

在控制項中加入狀態

TypeScript

JavaScript

測試範例程式碼

控制項