控制項

選取平台: Android iOS JavaScript

控制項總覽

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

下圖顯示 Maps JavaScript API 顯示的預設控制項組合:

下方是可在地圖中使用的完整控制項清單:

  • 「縮放控制項」會顯示「+」和「-」的按鈕,可用來變更地圖的縮放等級。根據預設,這個控制項會顯示在地圖的右下角。
  • 地圖類型控制項位於下拉式選單或水平按鈕列樣式中,可讓使用者選擇地圖類型 (ROADMAPSATELLITEHYBRIDTERRAIN)。根據預設,這個控制項會顯示在地圖左上角。
  • 街景服務控制項提供衣夾人圖示,只要拖曳至地圖上即可啟用街景服務。根據預設,這個控制項會顯示在地圖右下角。
  • 旋轉控制項」提供包含傾斜圖片的地圖傾斜和旋轉選項的組合。根據預設,這個控制項會顯示在地圖右下角。詳情請參閱 45° 圖像
  • 縮放控制項會顯示地圖比例元素。 這個控制項預設為停用。
  • 全螢幕模式提供以全螢幕模式開啟地圖的選項。在預設情況下,電腦和行動裝置會啟用這個控制項。注意:iOS 不支援全螢幕功能。因此,iOS 裝置不會顯示全螢幕控制項。
  • 鍵盤快速鍵控制項會顯示能與地圖互動的鍵盤快速鍵清單。

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

在預設情況下,系統不會啟用部分控制項。如要瞭解預設 UI 行為 (以及如何修改這類行為),請參閱下方的預設使用者介面

預設使用者介面

根據預設,如果地圖太小 (200x200 像素),所有控制項都會消失。 如要明確設定這項行為,請直接將控制項設為可見。請參閱在地圖中新增控制項

除了行動裝置螢幕外,控制項和行為在行動裝置和電腦裝置上的行為都相同 (請參閱控制項清單中描述的行為)。

此外,所有裝置都會預設啟用鍵盤操作功能。

停用預設使用者介面

建議您完全關閉 API 的預設 UI 按鈕。方法是將地圖的 disableDefaultUI 屬性 (位於 MapOptions 物件內) 設為 true。這個屬性會停用 Maps JavaScript API 中的任何 UI 控制按鈕。但不會影響基本地圖的滑鼠手勢或鍵盤快速鍵,這些控制項分別由 gestureHandlingkeyboardShortcuts 屬性控管。

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

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

查看範例

在地圖中加入控制項

建議您透過新增、新增或修改 UI 行為或控制項的方式自訂介面,並確保日後更新不會改變此行為。如果您只想要新增或修改現有行為,請務必明確新增控制項至應用程式。

根據預設,地圖上會顯示某些控制項,而其他控制項則只有在你明確要求時才會顯示。你可以在地圖中新增或移除控制項,詳情請參閱以下 MapOptions 物件的欄位設定。您可以將這些欄位設為 true,藉此隱藏這些控制項,或是設為 false 隱藏控制項:

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

根據預設,如果地圖小於 200x200 像素,所有控制項都會消失。 如要明確設定這項行為,請直接將控制項設為可見。舉例來說,下表會根據地圖大小和 zoomControl 欄位的設定,顯示縮放控制項是否可見。

地圖大小 zoomControl 是否顯示?
不限 false
不限 true
>= 200 x 200 像素 undefined
< 200 x 200 像素 undefined

以下範例會設定地圖隱藏縮放控制項,並顯示縮放比例控制項。請注意,我們不會明確停用預設 UI,因此這些修改會加到預設 UI 行為中。

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 標誌) 的 UI 元素位置重疊。在這類情況下,控制項會依據每個位置註明的邏輯流動,並盡可能接近指定位置。

以下範例顯示已啟用不同控制項的所有控制項。

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> 元素,通常會向使用者顯示某些 UI,並處理與使用者或地圖之間的互動 (通常是透過事件處理常式)。

您必須自訂幾項規則,才能建立自訂控制項。不過,以下指南也是最佳做法:

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

設定自訂控制項位置

自訂控制項可在地圖上放置在 Map 物件和 controls 屬性中的適當位置,這個屬性包含 google.maps.ControlPosition 的陣列。您可以將 Node (通常是 <div>) 新增至適當的 ControlPosition,以將自訂控制項新增至地圖。(如需這些位置的相關資訊,請參閱上方的控制定位一節)。

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

API 會按照 index 屬性的順序在各個位置放置控制項;索引較低的控制項會優先放置。舉例來說,位置 BOTTOM_RIGHT 的兩個自訂控制項會根據此索引順序排列,優先順序較低的值會優先。根據預設,所有自訂控制項都會放置於任何 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);

自訂控制項範例

以下控制項簡單易用 (雖然並非特別實用),且結合上述模式。這個控制項回應了地圖 '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;
查看範例

查看範例

將狀態加入控制項

控制項也可以儲存狀態。以下範例與之前的範例類似,但控制項包含額外的「設定首頁」按鈕,該控制項可設定控制項以顯示新的住家位置。方法是在控制項中建立 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;

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

查看範例