資訊視窗

透過集合功能整理內容 你可以依據偏好儲存及分類內容。
選取平台: Android iOS JavaScript
  1. 說明
  2. 新增資訊視窗
  3. 開啟資訊視窗
  4. 關閉資訊視窗
  5. 移動資訊視窗

引言

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 上呼叫 open() 方法,並傳遞指定下列選項的 InfoWindowOpenOptions 物件常值:

  • map 會指定要開啟的地圖或街景服務全景。
  • anchor 包含錨點 (例如 Marker)。如果 anchor 選項是 null 或未定義,資訊視窗會在其 position 屬性中開啟。
  • shouldFocus 會指定是否要在開啟時將焦點移至資訊視窗。

TypeScript

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

function initMap(): void {
  const uluru = { lat: -25.363, lng: 131.044 };
  const map = new google.maps.Map(
    document.getElementById("map") as HTMLElement,
    {
      zoom: 4,
      center: uluru,
    }
  );

  const contentString =
    '<div id="content">' +
    '<div id="siteNotice">' +
    "</div>" +
    '<h1 id="firstHeading" class="firstHeading">Uluru</h1>' +
    '<div id="bodyContent">' +
    "<p><b>Uluru</b>, also referred to as <b>Ayers Rock</b>, is a large " +
    "sandstone rock formation in the southern part of the " +
    "Northern Territory, central Australia. It lies 335&#160;km (208&#160;mi) " +
    "south west of the nearest large town, Alice Springs; 450&#160;km " +
    "(280&#160;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.</p>" +
    '<p>Attribution: Uluru, <a href="https://en.wikipedia.org/w/index.php?title=Uluru&oldid=297882194">' +
    "https://en.wikipedia.org/w/index.php?title=Uluru</a> " +
    "(last visited June 22, 2009).</p>" +
    "</div>" +
    "</div>";

  const infowindow = new google.maps.InfoWindow({
    content: contentString,
  });

  const marker = new google.maps.Marker({
    position: uluru,
    map,
    title: "Uluru (Ayers Rock)",
  });

  marker.addListener("click", () => {
    infowindow.open({
      anchor: marker,
      map,
      shouldFocus: false,
    });
  });
}

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

JavaScript

// This example displays a marker at the center of Australia.
// When the user clicks the marker, an info window opens.
function initMap() {
  const uluru = { lat: -25.363, lng: 131.044 };
  const map = new google.maps.Map(document.getElementById("map"), {
    zoom: 4,
    center: uluru,
  });
  const contentString =
    '<div id="content">' +
    '<div id="siteNotice">' +
    "</div>" +
    '<h1 id="firstHeading" class="firstHeading">Uluru</h1>' +
    '<div id="bodyContent">' +
    "<p><b>Uluru</b>, also referred to as <b>Ayers Rock</b>, is a large " +
    "sandstone rock formation in the southern part of the " +
    "Northern Territory, central Australia. It lies 335&#160;km (208&#160;mi) " +
    "south west of the nearest large town, Alice Springs; 450&#160;km " +
    "(280&#160;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.</p>" +
    '<p>Attribution: Uluru, <a href="https://en.wikipedia.org/w/index.php?title=Uluru&oldid=297882194">' +
    "https://en.wikipedia.org/w/index.php?title=Uluru</a> " +
    "(last visited June 22, 2009).</p>" +
    "</div>" +
    "</div>";
  const infowindow = new google.maps.InfoWindow({
    content: contentString,
  });
  const marker = new google.maps.Marker({
    position: uluru,
    map,
    title: "Uluru (Ayers Rock)",
  });

  marker.addListener("click", () => {
    infowindow.open({
      anchor: marker,
      map,
      shouldFocus: false,
    });
  });
}

window.initMap = initMap;
查看範例

查看範例

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

將焦點放在資訊視窗

如要將焦點設定在資訊視窗,請呼叫其 focus() 方法。設定焦點之前,建議您使用這個方法搭配 visible 事件。在非可見的資訊視窗中呼叫此方法不會產生任何作用。呼叫 open() 即可顯示資訊視窗。

關閉資訊視窗

根據預設,資訊視窗會持續顯示,直到使用者點選關閉控制項 (資訊視窗右上角的十字圖示) 或按下 ESC 鍵。您也可以透過呼叫 close() 方法,明確關閉資訊視窗。

資訊視窗關閉時,焦點會移至在焦點開啟資訊視窗前聚焦的元素。如果找不到該元素,焦點就會移回地圖。如要覆寫此行為,您可以監聽 closeclick 事件,並手動管理焦點,如以下範例所示:

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

移動資訊視窗

目前有以下幾種方法可變更資訊視窗的位置:

  • 在資訊視窗上呼叫 setPosition(),或
  • 使用 InfoWindow.open() 方法將資訊視窗附加至新標記。注意:如果在不傳遞標記的情況下呼叫 open()InfoWindow 會使用建構時透過 InfoWindowOptions 物件常值指定的位置。

自訂

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