資訊視窗

選取平台： Android iOS JavaScript

簡介

InfoWindow 會在地圖上方特定位置的彈出式視窗中顯示內容 (通常為文字或圖片)。資訊視窗是由一個內容區域和一個錐形柄所組成，錐形柄的尖端會連接地圖上的指定位置。資訊視窗會以對話方塊的形式顯示在螢幕閱讀器中。

一般來說，您可以將資訊視窗附加至標記，但也可以附加至特定經緯度，方法請參閱下方有關新增資訊視窗的章節。

概括而言，資訊視窗是一種疊加層。如要進一步瞭解其他類型的疊加層，請參閱「在地圖上繪圖」一文。

新增資訊視窗

InfoWindow 建構函式會採用 InfoWindowOptions 物件常值，指定用於顯示資訊視窗的初始參數。

InfoWindowOptions 物件常值包含下列欄位：

content：包含要在資訊視窗中顯示的一串文字或一個 DOM 節點。
pixelOffset：包含從資訊視窗尖端到資訊視窗錨定位置之間的位移值。實際上，您不必指定這個欄位，保留預設值即可。
position：包含資訊視窗錨定位置的 LatLng。請注意，InfoWindow 可以附加至 Marker 物件 (這種情況下，資訊視窗位置取決於標記位置)，或是附加至地圖上指定的 LatLng。其中一個擷取 LatLng 方式就是使用地理編碼服務。在標記上開啟資訊視窗時，系統會自動更新 position。
maxWidth：指定資訊視窗的寬度上限 (以像素為單位)。根據預設，資訊視窗會隨內容擴展，如果資訊視窗填滿整張地圖，文字會自動換行。如果您加入 maxWidth，資訊視窗就會自動換行，強制執行指定的寬度。資訊視窗尺寸達到寬度上限後，如果畫面還有多餘的垂直空間，資訊視窗可能就會垂直擴展。

InfoWindow 的內容可以包含一串文字、一段 HTML 程式碼或一個 DOM 元素。如要設定內容，請在 InfoWindowOptions 內指定，或是在 InfoWindow 上明確呼叫 setContent()。

如要明確調整內容尺寸，您可以將內容放入 <div> 元素中，然後使用 CSS 設定 <div> 的樣式。此外，您還可以使用 CSS 啟用捲動功能。請注意，如果沒有啟用捲動功能，則當內容超過資訊視窗的可用空間時，可能就會「溢出」資訊視窗。

最佳做法：為了提供最佳使用者體驗，建議您在地圖上一次只開啟一個資訊視窗。要是同時開啟多個資訊視窗，地圖就會顯得雜亂無章。如果您一次只需要開啟一個資訊視窗，可以只建立一個 InfoWindow 物件，然後在發生地圖事件 (例如使用者按下地圖) 時，在不同的位置或標記上開啟資訊視窗。如果您需要開啟多個資訊視窗，可以同時顯示多個 InfoWindow 物件。

開啟資訊視窗

資訊視窗建立後，不會自動顯示在地圖上。如要顯示資訊視窗，您必須在 InfoWindow 上呼叫 open() 方法，並傳遞 InfoWindowOpenOptions 物件常值來指定下列選項：

map：指定要開啟資訊視窗的地圖或街景服務全景。
anchor：包含錨點 (例如 Marker)。如果 anchor 選項為 null 或未定義，資訊視窗就會在 position 屬性指定的位置開啟。

TypeScript

// This example displays a marker at the center of Australia.
// When the user clicks the marker, an info window opens.

async function initMap(): Promise<void> {
  // Import the needed libraries.
  await google.maps.importLibrary("maps");
  await google.maps.importLibrary("marker");

  // Get the map element and the inner map from it.
  const mapElement = document.querySelector('gmp-map') as google.maps.MapElement;
  const innerMap = mapElement.innerMap;

  // Get the center of the map.
  const center = mapElement.center;

  // Create the info window content.
  const heading = document.createElement("h1");
  heading.textContent = "Uluru (Ayers Rock)";

  const content = document.createElement("div");

  const infoParagraph = document.createElement("p");
  infoParagraph.textContent =
  `Uluru, also referred to as Ayers Rock, is a large sandstone rock formation 
  in the southern part of the Northern Territory, central Australia. It lies
  335 km (208 mi) south west of the nearest large town, Alice Springs; 450 km 
  (280 mi) by road. Kata Tjuta and Uluru are the two major features of the 
  Uluru - Kata Tjuta National Park. Uluru is sacred to the Pitjantjatjara and 
  Yankunytjatjara, the Aboriginal people of the area. It has many springs, 
  waterholes, rock caves and ancient paintings. Uluru is listed as a World 
  Heritage Site.`;

  content.appendChild(infoParagraph);

  const link = document.createElement("a");
  link.href = "https://en.wikipedia.org/w/index.php?title=Uluru";
  link.textContent = "https://en.wikipedia.org/w/index.php?title=Uluru";
  link.target = "_blank";
  content.appendChild(link);

  // Create the info window.
  const infowindow = new google.maps.InfoWindow({
    headerContent: heading,
    content: content,
    ariaLabel: "Uluru",
    maxWidth: 500, // Set max width (optional).
  });

  // Create the marker.
  const marker = new google.maps.marker.AdvancedMarkerElement({
    position: center,
    map: innerMap,
    title: "Uluru (Ayers Rock)",
    gmpClickable: true,
  });

  // Open the info window when the map loads.
  infowindow.open({
    anchor: marker,
    map: innerMap,
  });

  // Open the info window when the marker is clicked.
  marker.addEventListener("gmp-click", () => {
    infowindow.open({
      anchor: marker,
      map: innerMap,
    });
  });
}

initMap();index.ts

JavaScript

// This example displays a marker at the center of Australia.
// When the user clicks the marker, an info window opens.
async function initMap() {
    // Import the needed libraries.
    await google.maps.importLibrary("maps");
    await google.maps.importLibrary("marker");
    // Get the map element and the inner map from it.
    const mapElement = document.querySelector('gmp-map');
    const innerMap = mapElement.innerMap;
    // Get the center of the map.
    const center = mapElement.center;
    // Create the info window content.
    const heading = document.createElement("h1");
    heading.textContent = "Uluru (Ayers Rock)";
    const content = document.createElement("div");
    const infoParagraph = document.createElement("p");
    infoParagraph.textContent =
        `Uluru, also referred to as Ayers Rock, is a large sandstone rock formation 
  in the southern part of the Northern Territory, central Australia. It lies
  335 km (208 mi) south west of the nearest large town, Alice Springs; 450 km 
  (280 mi) by road. Kata Tjuta and Uluru are the two major features of the 
  Uluru - Kata Tjuta National Park. Uluru is sacred to the Pitjantjatjara and 
  Yankunytjatjara, the Aboriginal people of the area. It has many springs, 
  waterholes, rock caves and ancient paintings. Uluru is listed as a World 
  Heritage Site.`;
    content.appendChild(infoParagraph);
    const link = document.createElement("a");
    link.href = "https://en.wikipedia.org/w/index.php?title=Uluru";
    link.textContent = "https://en.wikipedia.org/w/index.php?title=Uluru";
    link.target = "_blank";
    content.appendChild(link);
    // Create the info window.
    const infowindow = new google.maps.InfoWindow({
        headerContent: heading,
        content: content,
        ariaLabel: "Uluru",
        maxWidth: 500, // Set max width (optional).
    });
    // Create the marker.
    const marker = new google.maps.marker.AdvancedMarkerElement({
        position: center,
        map: innerMap,
        title: "Uluru (Ayers Rock)",
        gmpClickable: true,
    });
    // Open the info window when the map loads.
    infowindow.open({
        anchor: marker,
        map: innerMap,
    });
    // Open the info window when the marker is clicked.
    marker.addEventListener("gmp-click", () => {
        infowindow.open({
            anchor: marker,
            map: innerMap,
        });
    });
}
initMap();index.js

查看範例

試用範例

JSFiddle.net

下例會設定資訊視窗的 maxWidth：查看範例。

將焦點放在資訊視窗

如要將焦點放在資訊視窗，請呼叫 focus() 方法。建議先搭配 visible 事件使用這個方法，再設定焦點。在未顯示的資訊視窗中呼叫這個方法，不會產生任何效果。呼叫 open() 即可顯示資訊視窗。

關閉資訊視窗

根據預設，資訊視窗會保持開啟狀態，直到使用者按下關閉控制項 (資訊視窗右上角的十字圖示) 或 ESC 鍵為止。此外，您也可以呼叫 close() 方法來明確關閉資訊視窗。

資訊視窗關閉時，焦點會移回資訊視窗開啟前位於焦點的元素。如果沒有這類元素，焦點就會移回地圖。如要覆寫這個行為，您可以監聽 closeclick 事件並手動管理焦點，如下例所示：

infoWindow.addListener('closeclick', ()=>{
  // Handle focus manually.
});

移動資訊視窗

您可以透過下列幾種方法變更資訊視窗的位置：

在資訊視窗上呼叫 setPosition()
使用 InfoWindow.open() 方法將資訊視窗附加至新標記。注意：如果您在呼叫 open() 時未傳遞任何標記，InfoWindow 就會使用建構時透過 InfoWindowOptions 物件常值指定的位置。

自訂

InfoWindow 類別不提供自訂功能。如要瞭解如何建立完全自訂的彈出式視窗，請參閱自訂彈出式視窗範例。