InfoWindow 類別
google.maps.InfoWindow
類別
一種疊加層,看起來像泡泡,而且通常連接至標記。
這個類別會擴充 MVCObject
。
呼叫 const {InfoWindow} = await google.maps.importLibrary("maps")
或 const {InfoWindow} = await google.maps.importLibrary("streetView")
即可存取。請參閱 Maps JavaScript API 中的程式庫。
建構函式 | |
---|---|
InfoWindow |
InfoWindow([opts]) 參數:
使用指定的選項建立資訊視窗。資訊視窗可以放在地圖中的特定位置或標記上方,視選項而定。除非停用自動平移,否則資訊視窗會平移地圖,在開啟時使其自身可見。建構資訊視窗之後,您必須呼叫 open,才會在地圖上顯示它。使用者可以按一下資訊視窗上的關閉按鈕,就可以將它從地圖上移除,或者開發人員可以呼叫 close(),達到一樣的效果。 |
屬性 | |
---|---|
isOpen |
類型:
boolean 檢查 InfoWindow 是否已開啟。 |
方法 | |
---|---|
close |
close() 參數:無
傳回值:無
從 DOM 結構移除這個資訊視窗,就能關閉這個資訊視窗。 |
focus |
focus() 參數:無
傳回值:無
將焦點設在此 InfoWindow 。您可以考慮搭配 visible 事件使用這個方法,確保先顯示 InfoWindow ,再設定焦點。無法聚焦的 InfoWindow 無法聚焦。 |
getContent |
getContent() 參數:無
|
getHeaderContent |
getHeaderContent() 參數:無
Return Value (傳回值):
string|Element|Text|null|undefined 這個 InfoWindow 的標頭內容。詳情請參閱 InfoWindowOptions.headerContent 。 |
getHeaderDisabled |
getHeaderDisabled() 參數:無
傳回值:
boolean|undefined 是否停用整個標題列。詳情請參閱 InfoWindowOptions.headerDisabled 。 |
getPosition |
getPosition() 參數:無
傳回值:
LatLng|null|undefined 這個資訊視窗的經緯度位置。 |
getZIndex |
getZIndex() 參數:無
傳回值:
number 這個資訊視窗的 zIndex。 |
open |
open([options, anchor]) 參數:
傳回值:無
在指定的地圖上開啟這個資訊視窗。選擇性,資訊視窗可以與一個錨點建立關聯。在核心 API 中,唯一的錨點是 Marker 類別。不過,錨點可以是任何揭露 LatLng position 屬性的 MVCObject,以及用於計算 pixelOffset 的選用點 anchorPoint 屬性 (請參閱 InfoWindowOptions)。anchorPoint 是從錨定位置到 InfoWindow 小費的偏移值。建議您使用 InfoWindowOpenOptions 介面做為此方法的單一引數。如要避免在開啟時變更瀏覽器焦點,請將 InfoWindowOpenOptions.shouldFocus 設為 false 。 |
setContent |
setContent([content]) 傳回值:無
|
setHeaderContent |
setHeaderContent([headerContent]) 參數:
傳回值:無
|
setHeaderDisabled |
setHeaderDisabled([headerDisabled]) 參數:
傳回值:無
|
setOptions |
setOptions([options]) 參數:
傳回值:無
|
setPosition |
setPosition([position]) 參數:
傳回值:無
|
setZIndex |
setZIndex(zIndex) 參數:
傳回值:無
|
繼承:
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 optional |
類型:
string optional 要指派給資訊視窗的 AriaLabel。 |
content optional |
要在資訊視窗中顯示的內容。可以是 HTML 元素、純文字字串或包含 HTML 的字串。資訊視窗會根據內容調整大小。如果要另外設定內容的大小,可以將內容設定成該大小的 HTML 元素。 |
disableAutoPan optional |
類型:
boolean optional 預設:
false 停用平移地圖的功能,讓資訊視窗在開啟時會完整顯示。 |
headerContent optional |
要顯示在 InfoWindow 標題列的內容。可以是 HTML 元素或純文字字串。資訊視窗會根據內容調整大小。如要為標頭內容設定明確的尺寸,請將 headerContent 設為該大小的 HTML 元素。 |
headerDisabled optional |
類型:
boolean optional 停用 InfoWindow 中的整個標頭列。如果設為 true,系統將移除標頭,並隱藏標頭內容和關閉按鈕。 |
maxWidth optional |
類型:
number optional 資訊視窗的寬度上限,無論內容的寬度為何。只有在呼叫 open() 之前設定這個值,系統才會採用這個值。如要在變更內容時變更寬度上限,請呼叫 close() 、setOptions() ,和 open() 。 |
minWidth optional |
類型:
number optional 資訊視窗的最小寬度,無論內容的寬度為何。使用這個屬性時,強烈建議您將 minWidth 設為小於地圖寬度 (以像素為單位) 的值。只有在呼叫 open() 之前設定這個值,系統才會採用這個值。如要在變更內容時變更最小寬度,請呼叫 close() 、setOptions() ,和 open() 。 |
pixelOffset optional |
類型:
Size optional 地圖上資訊視窗頂端從該點的位移 (以像素為單位),也就是資訊視窗錨定的地理座標。如果使用錨點開啟資訊視窗,系統會從錨點的 anchorPoint 屬性計算 pixelOffset 。 |
position optional |
類型:
LatLng|LatLngLiteral optional 此資訊視窗顯示位置的 LatLng。如果使用錨點開啟 InfoWindow,會改用錨定位置。 |
zIndex optional |
類型:
number optional 所有資訊視窗會按照其 zIndex 順序顯示,值較大的資訊視窗會顯示在值較小的資訊視窗前面。根據預設,資訊視窗會根據緯度顯示;如果緯度較低,則會顯示在緯度較高的資訊視窗前面。資訊視窗會顯示在標記的前面。 |
InfoWindowOpenOptions 介面
google.maps.InfoWindowOpenOptions
介面
開啟資訊視窗的選項
屬性 | |
---|---|
anchor optional |
類型:
MVCObject|AdvancedMarkerElement optional 要放置這個資訊視窗的錨定標記。如果錨點不是空值,則資訊視窗會定位在錨點的正中央。資訊視窗會在與錨點 (如果有的話) 相同的地圖或全景上呈現。 |
map optional |
類型:
Map|StreetViewPanorama optional 算繪這個 InfoWindow 的地圖或全景。 |
shouldFocus optional |
類型:
boolean optional 是否要在資訊視窗開啟時移動焦點。如未設定這個屬性或設為 null 或 undefined ,系統會運用經驗法則,判斷是否應移動焦點。建議針對實際需求明確設定這個屬性,因為經驗法則可能會隨時調整,而且不一定適用於某些用途。 |