Info Window

InfoWindow 類別

google.maps.InfoWindow class

一種疊加層,看起來像泡泡,而且通常連接至標記。

這個類別會擴充 MVCObject

呼叫 const {InfoWindow} = await google.maps.importLibrary("maps")const {InfoWindow} = await google.maps.importLibrary("streetView") 即可存取。請參閱「Maps JavaScript API 中的程式庫」。

InfoWindow
InfoWindow([opts])
參數: 
使用指定選項建立資訊視窗。視選項中指定的內容而定,資訊視窗可在地圖上的特定位置或標記上方顯示。除非停用自動捲動功能,否則 InfoWindow 會捲動地圖,讓自己在開啟時顯示。建構 InfoWindow 後,您必須呼叫 open 才能在地圖上顯示。使用者可以按一下資訊視窗上的關閉按鈕,就可以將它從地圖上移除,或者開發人員可以呼叫 close(),達到一樣的效果。
isOpen
類型:  boolean
檢查 InfoWindow 是否已開啟。
close
close()
參數:
傳回值:
從 DOM 結構移除這個資訊視窗,就能關閉這個資訊視窗。
focus
focus()
參數:
傳回值:
將焦點設為此 InfoWindow。建議您搭配 visible 事件使用這個方法,確保在設定焦點前,InfoWindow 會顯示在畫面上。無法聚焦於未顯示的 InfoWindow
getContent
getContent()
參數:
傳回值:  string|Element|Text|null|undefined 這個 InfoWindow 的內容。與先前設定的內容相同。
getHeaderContent
getHeaderContent()
參數:
傳回值:  string|Element|Text|null|undefined這個 InfoWindow 的標頭內容。請參閱 InfoWindowOptions.headerContent
getHeaderDisabled
getHeaderDisabled()
參數:
傳回值:  boolean|undefined 是否停用整個標題列。請參閱 InfoWindowOptions.headerDisabled
getPosition
getPosition()
參數:
傳回值:  LatLng|null|undefined 這個 InfoWindow 的 LatLng 位置。
getZIndex
getZIndex()
參數:
傳回值:  number 這個 InfoWindow 的 zIndex。
open
open([options, anchor])
參數: 
  • optionsInfoWindowOpenOptions|Map|StreetViewPanorama optional InfoWindowOpenOptions 物件 (建議) 或用於轉譯此 InfoWindow 的地圖/全景圖。
  • anchorMVCObject|AdvancedMarkerElement optional 這個 InfoWindow 的定位錨點。如果錨點非空值,InfoWindow 會置於錨點的頂端中央。資訊視窗會在錨點(如有) 相同的地圖或全景中顯示。
傳回值:
在指定地圖上開啟這個 InfoWindow。您可以選擇將 InfoWindow 與錨點建立關聯。在核心 API 中,唯一的錨點是 Marker 類別。不過,錨點可以是任何公開 LatLng position 屬性和 (或) Point anchorPoint 屬性的 MVCObject,用於計算 pixelOffset (請參閱 InfoWindowOptions)。anchorPoint 是從錨點位置到 InfoWindow 尖端的偏移量。建議您使用 InfoWindowOpenOptions 介面做為此方法的單一引數。如要避免在開啟時變更瀏覽器焦點,請將 InfoWindowOpenOptions.shouldFocus 設為 false
setContent
setContent([content])
參數: 
  • contentstring|Element|Text optional這個 InfoWindow 要顯示的內容。
傳回值:
setHeaderContent
setHeaderContent([headerContent])
參數: 
傳回值:
setHeaderDisabled
setHeaderDisabled([headerDisabled])
參數: 
傳回值:
setOptions
setOptions([options])
參數: 
傳回值:
setPosition
setPosition([position])
參數: 
傳回值:
setZIndex
setZIndex(zIndex)
參數: 
  • zIndexnumber這個 InfoWindow 的 z 索引。Z-index 較高的 InfoWindow 會顯示在 Z-index 較低的所有其他 InfoWindow 前方。
傳回值:
繼承: addListenerbindTogetnotifysetsetValuesunbindunbindAll
close
function()
引數:
每當 InfoWindow 關閉時,系統就會觸發這項事件。例如,這可能是因為呼叫 InfoWindow.close 方法、按下 Esc 鍵關閉 InfoWindow,或是點選關閉按鈕或將 InfoWindow 移至其他地圖。
closeclick
function()
引數:
按一下關閉按鈕時,會引發此事件。
content_changed
function()
引數:
按一下 content 屬性時,會引發此事件。
domready
function()
引數:
當含有 InfoWindow 內容的 <div> 附加至 DOM 時,系統就會觸發此事件。如果您是以動態方式建構資訊視窗內容,您可能希望能監控這個事件。
headercontent_changed
function()
引數:
當 headerContent 屬性變更時,系統會觸發此事件。
headerdisabled_changed
function()
引數:
當 headerDisabled 屬性變更時,系統會觸發此事件。
position_changed
function()
引數:
當 position 屬性變更後,會引發此事件。
visible
function()
引數:
InfoWindow 完全顯示時,系統會觸發此事件。當 InfoWindow 從畫面上滑動離開,然後又滑回畫面時,系統不會觸發這項事件。
zindex_changed
function()
引數:
InfoWindow 的 zIndex 變更時,系統會觸發此事件。

InfoWindowOptions 介面

google.maps.InfoWindowOptions 介面

InfoWindowOptions 物件,用於定義可在 InfoWindow 上設定的屬性。

ariaLabel optional
類型:  string optional
要指派給 InfoWindow 的 AriaLabel。
content optional
類型:  string|Element|Text optional
要在 InfoWindow 中顯示的內容。這可以是 HTML 元素、純文字字串,或包含 HTML 的字串。InfoWindow 的大小會根據內容調整。如果要另外設定內容的大小,可以將內容設定成該大小的 HTML 元素。
disableAutoPan optional
類型:  boolean optional
預設值: false
停用地圖平移功能,讓 InfoWindow 在開啟時完全顯示。
headerContent optional
類型:  string|Element|Text optional
要在 InfoWindow 標題列中顯示的內容。這可以是 HTML 元素,或純文字字串。InfoWindow 的大小會根據內容調整。如要為標頭內容設定明確的大小,請將 headerContent 設為具有該大小的 HTML 元素。
headerDisabled optional
類型:  boolean optional
停用 InfoWindow 中的整個標頭列。設為 true 時,系統會移除標題,隱藏標題內容和關閉按鈕。
maxWidth optional
類型:  number optional
無論內容寬度為何,InfoWindow 的寬度上限為此值。只有在呼叫 open() 之前設定的值才會納入考量。如要變更變更內容時的最大寬度,請依序呼叫 close()setOptions()open()
minWidth optional
類型:  number optional
無論內容寬度為何,InfoWindow 的寬度下限。使用這個屬性時,強烈建議您將 minWidth 設為小於地圖寬度 (以像素為單位) 的值。只有在呼叫 open() 之前設定的值才會納入考量。如要變更變更內容時的最低寬度,請依序呼叫 close()setOptions()open()
pixelOffset optional
類型:  Size optional
資訊視窗尖端與地圖上資訊視窗錨定點之間的位移值 (以像素為單位)。如果 InfoWindow 是使用錨點開啟,系統會根據錨點的 anchorPoint 屬性計算 pixelOffset
position optional
類型:  LatLng|LatLngLiteral optional
這個資訊視窗的 LatLng 顯示位置。如果 InfoWindow 是使用錨點開啟,系統會改用錨點的位置。
zIndex optional
類型:  number optional
所有 InfoWindow 會按照 zIndex 順序顯示在地圖上,值較高的 InfoWindow 會顯示在值較低的 InfoWindow 前方。根據預設,資訊視窗會依照緯度顯示,較低緯度的資訊視窗會顯示在較高緯度的資訊視窗前方。資訊視窗會顯示在標記的前面。

InfoWindowOpenOptions 介面

google.maps.InfoWindowOpenOptions 介面

開啟 InfoWindow 的選項

anchor optional
類型:  MVCObject|AdvancedMarkerElement optional
這個資訊視窗的錨點。如果錨點非空值,InfoWindow 會置於錨點的頂端中央。資訊視窗會在錨點(如有) 相同的地圖或全景中顯示。
map optional
類型:  Map|StreetViewPanorama optional
用於算繪資訊視窗的地圖或全景。
shouldFocus optional
類型:  boolean optional
指定是否要在資訊視窗開啟時,將焦點移入資訊視窗。如果未設定這項屬性,或設為 nullundefined,系統會使用啟發式方法決定是否應移動焦點。由於啟發式演算法會隨時變更,且可能無法適用於所有用途,因此建議您明確設定這項屬性,以符合您的需求。