Info Window

InfoWindow 類別

google.maps.InfoWindow class
extends MVCObject
library "maps", "streetView"

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

const {InfoWindow} = await google.maps.importLibrary("maps");
或
const {InfoWindow} = await google.maps.importLibrary("streetView");
InfoWindow
InfoWindow([opts])
參數:
使用指定選項建立資訊視窗。視選項中的指定內容而定,InfoWindow 可以放在地圖上的特定位置或標記上方。除非停用自動平移,否則 InfoWindow 開啟時會平移地圖,讓自己顯示在畫面上。建構 InfoWindow 後,您必須呼叫 open,才能在地圖上顯示。使用者可以按一下資訊視窗上的關閉按鈕,就可以將它從地圖上移除,或者開發人員可以呼叫 close(),達到一樣的效果。
isOpen
readonly
類型: 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])
參數:
  • options:InfoWindowOpenOptions|Map|StreetViewPanorama optional InfoWindowOpenOptions 物件 (建議),或要用來算繪這個 InfoWindow 的地圖/全景。
  • anchor:MVCObject|AdvancedMarkerElement optional這個 InfoWindow 的錨定位置。如果錨點不是空值,InfoWindow 會位於錨點的正上方。InfoWindow 會在與錨點相同的地圖或全景上算繪 (如有)。
傳回值:無
在指定地圖上開啟這個 InfoWindow。您也可以選擇將 InfoWindow 與錨點建立關聯。在核心 API 中,唯一的錨點是 Marker 類別。不過,錨點可以是任何 MVCObject,只要該物件公開 LatLng position 屬性,以及用於計算 pixelOffset 的選用 Point anchorPoint 屬性即可 (請參閱 InfoWindowOptions)。anchorPoint 是錨點位置到 InfoWindow 尖端的偏移量。建議使用 InfoWindowOpenOptions 介面做為這個方法的單一引數。如要避免在開啟時變更瀏覽器焦點,請將 InfoWindowOpenOptions.shouldFocus 設為 false。
setContent
setContent([content])
參數:
  • content:string|Element|Text optional這個 InfoWindow 要顯示的內容。
傳回值:無
setHeaderContent
setHeaderContent([headerContent])
參數:
傳回值:無
setHeaderDisabled
setHeaderDisabled([headerDisabled])
參數:
傳回值:無
setOptions
setOptions([options])
參數:
傳回值:無
setPosition
setPosition([position])
參數:
傳回值:無
setZIndex
setZIndex(zIndex)
參數:
  • zIndex:number這個 InfoWindow 的 z-index。z-index 較大的 InfoWindow 會顯示在所有 z-index 較小的 InfoWindow 前方。
傳回值:無
繼承: addListener、bindTo、get、notify、set、setValues、unbind、unbindAll
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
選填
類型: string optional
要指派給 InfoWindow 的 AriaLabel。
content
選填
類型: string|Element|Text optional
要在 InfoWindow 中顯示的內容。可以是 HTML 元素、純文字字串或包含 HTML 的字串。InfoWindow 會根據內容調整大小。如果要另外設定內容的大小,可以將內容設定成該大小的 HTML 元素。
disableAutoPan
選填
類型: boolean optional
預設值: false
停用平移地圖功能,讓 InfoWindow 在開啟時完整顯示。
headerContent
選填
類型: string|Element|Text optional
要在 InfoWindow 標題列中顯示的內容。這可以是 HTML 元素或純文字字串。InfoWindow 會根據內容調整大小。如要為標頭內容設定明確大小,請將 headerContent 設為該大小的 HTML 元素。
headerDisabled
選填
類型: boolean optional
停用 InfoWindow 中的整個標題列。如果設為 true,系統會移除標頭,隱藏標頭內容和關閉按鈕。
maxWidth
選填
類型: number optional
InfoWindow 的寬度上限,不論內容寬度為何。只有在呼叫 open() 之前設定這個值,系統才會考量這個值。如要在變更內容時變更寬度上限,請依序呼叫 close()、setOptions() 和 open()。
minWidth
選填
類型: number optional
InfoWindow 的寬度下限,不受內容寬度影響。使用這項屬性時,強烈建議將 minWidth 設為小於地圖寬度的值 (以像素為單位)。只有在呼叫 open() 之前設定這個值,系統才會考量這個值。如要在變更內容時變更最小寬度,請依序呼叫 close()、setOptions() 和 open()。
pixelOffset
選填
類型: Size optional
資訊視窗尖端與地圖上錨定資訊視窗地理座標點之間的偏移量 (以像素為單位)。如果使用錨點開啟 InfoWindow,系統會根據錨點的 anchorPoint 屬性計算 pixelOffset。
position
選填
類型: LatLng|LatLngLiteral optional
顯示這個 InfoWindow 的 LatLng。如果 InfoWindow 是以錨點開啟,則會改用錨點的位置。
zIndex
選填
類型: number optional
所有 InfoWindow 都會按照 zIndex 順序顯示在地圖上,值較高的 InfoWindow 會比值較低的 InfoWindow 優先顯示。根據預設,InfoWindow 會依緯度顯示,緯度較低的 InfoWindow 會顯示在緯度較高的 InfoWindow 前方。資訊視窗會顯示在標記的前面。

InfoWindowOpenOptions 介面

google.maps.InfoWindowOpenOptions 介面

開啟 InfoWindow 的選項

anchor
選填
類型: MVCObject|AdvancedMarkerElement optional
這個資訊視窗的錨定位置。如果錨點不是空值,InfoWindow 會位於錨點的正上方。InfoWindow 會在與錨點相同的地圖或全景上算繪 (如有)。
map
選填
類型: Map|StreetViewPanorama optional
要顯示這個 InfoWindow 的地圖或全景。
shouldFocus
選填
類型: boolean optional
是否要在 InfoWindow 開啟時,將焦點移入 InfoWindow。如果未設定這項屬性,或設為 null 或 undefined,系統會使用經驗法則決定是否移動焦點。建議您根據需求明確設定這項屬性,因為啟發式演算法可能會變更,且不一定適用於所有用途。