InfoWindow
在地圖上方給定位置的彈出窗口中顯示內容(通常為文本或圖像)。信息窗口具有一個內容區域和
一個錐形柄。柄頂部與地圖上的某指定位置相連。
通常,您會將信息窗口附加到標記,但您也可以將信息窗口附加到特定緯度/經度,如下面的“添加信息窗
口”部分所述。
大體上說,信息窗口是一種疊層。
InfoWindow
構造函數采用了 InfoWindowOptions
對象字面量,后者為顯示信息窗口指定了一組初始參數。
InfoWindowOptions
對象字面量包含以下字段:
content
:其中包含要在信息窗口中顯示的本文字符串或 DOM 節點。
pixelOffset
:其中包含從信息窗口的頂部到信息窗口錨定位置的偏移量。實際上,您不應也無需修改此字
段。您可以將其保留為默認值。
position
:其中包含此信息窗口錨定位置的 LatLng
。注:InfoWindow
可附加到 Marker
對象(此情
況下,其位置取決于標記的位置),或附加到地圖本身指定的 LatLng
位置。在標記上打開信息窗口將
自動更新 position
。
maxWidth
:用于指定信息窗口的最大寬度(以像素為單位)。默認情況下,信息窗口會根據其中包含的內
容進行擴展,如果信息窗口填滿地圖,那么文本將會自動換行。如果您添加 maxWidth
,則信息窗口將自
動換行以強制適應指定的寬度。如果信息窗口達到最大寬度,但屏幕上仍有垂直空間,則信息窗口可能會
垂直擴展。
InfoWindow
的內容可包含文本字符串、HTML 代碼段或 DOM 元素。要設置此內容,請
在 InfoWindowOptions 中指定該內容,或者對 InfoWindow 顯式調用 setContent()。
如果您想要顯式調整內容的大小,則可將其納入 <div>
元素中,并使用 CSS 設置 <div>
的樣式。您還
可以使用 CSS 啟用滾動功能。請注意,如果您不啟用滾動功能,且內容超出信息窗口中可用的空間,則內容
可能會溢出信息窗口。
創建信息窗口時,它不會自動顯示在地圖上。要使信息窗口可見,則需對 InfoWindow
調用 open()
方
法,并向其傳遞其要在上面打開的 Map
,也可以選擇向其傳遞其要錨定到的 Marker
。如果沒有提供任何標
記,則信息窗口將在其 position
屬性指定的位置處打開。
默認情況下,InfoWindow
保持打開狀態,直至用戶點擊關閉控件(信息窗口右上角的叉號)。如果您需要,
可以通過調用其 close()
方法來顯式關閉信息窗口。
有兩種方法可以更改信息窗口的位置:
對信息窗口調用 setPosition()
;
使用 InfoWindow.open()
方法將信息窗口附加到新標記上。注:如果您調用 open()
而不傳遞標
記,InfoWindow
將使用構造時通過 InfoWindowOptions
對象字面量指定的位置。
以下代碼點擊marker后顯示一個信息窗口:
var marker=new google.maps.Marker({
title:'測試',
position:new google.maps.LatLng(30.54024807, 104.06966686),
map:map,
});
var infoWindow=new google.maps.InfoWindow({
content:'<p style="margin: 20px;">點了標注</p>',
});
google.maps.event.addListener(marker,'click',function () {
infoWindow.open(map,marker);
});