InfoWindow 在地圖上方給定位置的彈出窗口中顯示內(nèi)容（通常為文本或圖像）。信息窗口具有一個內(nèi)容區(qū)域和

一個錐形柄。柄頂部與地圖上的某指定位置相連。

通常，您會將信息窗口附加到標記，但您也可以將信息窗口附加到特定緯度/經(jīng)度，如下面的“添加信息窗

口”部分所述。

大體上說，信息窗口是一種疊層。

添加信息窗口

InfoWindow 構(gòu)造函數(shù)采用了 InfoWindowOptions 對象字面量，后者為顯示信息窗口指定了一組初始參數(shù)。

InfoWindowOptions 對象字面量包含以下字段：

• content：其中包含要在信息窗口中顯示的本文字符串或 DOM 節(jié)點。

  
  

• pixelOffset：其中包含從信息窗口的頂部到信息窗口錨定位置的偏移量。實際上，您不應也無需修改此字

  
  

• 段。您可以將其保留為默認值。

  
  

• position：其中包含此信息窗口錨定位置的 LatLng。注：InfoWindow 可附加到 Marker 對象（此情

  
  

• 況下，其位置取決于標記的位置），或附加到地圖本身指定的 LatLng 位置。在標記上打開信息窗口將

  
  

• 自動更新 position。

  
  

• maxWidth：用于指定信息窗口的最大寬度（以像素為單位）。默認情況下，信息窗口會根據(jù)其中包含的內(nèi)

  
  

• 容進行擴展，如果信息窗口填滿地圖，那么文本將會自動換行。如果您添加 maxWidth，則信息窗口將自

  
  

• 動換行以強制適應指定的寬度。如果信息窗口達到最大寬度，但屏幕上仍有垂直空間，則信息窗口可能會

  
  

• 垂直擴展。

  
  

 InfoWindow的內(nèi)容可包含文本字符串、HTML 代碼段或 DOM 元素。要設置此內(nèi)容，請

在 InfoWindowOptions 中指定該內(nèi)容，或者對 InfoWindow 顯式調(diào)用 setContent()。

如果您想要顯式調(diào)整內(nèi)容的大小，則可將其納入 <div> 元素中，并使用 CSS 設置 <div> 的樣式。您還

可以使用 CSS 啟用滾動功能。請注意，如果您不啟用滾動功能，且內(nèi)容超出信息窗口中可用的空間，則內(nèi)容

可能會溢出信息窗口。

打開信息窗口

創(chuàng)建信息窗口時，它不會自動顯示在地圖上。要使信息窗口可見，則需對 InfoWindow 調(diào)用 open() 方

法，并向其傳遞其要在上面打開的 Map，也可以選擇向其傳遞其要錨定到的 Marker。如果沒有提供任何標

記，則信息窗口將在其 position 屬性指定的位置處打開。

關(guān)閉信息窗口

默認情況下，InfoWindow 保持打開狀態(tài)，直至用戶點擊關(guān)閉控件（信息窗口右上角的叉號）。如果您需要，

可以通過調(diào)用其 close() 方法來顯式關(guān)閉信息窗口。

移動信息窗口

有兩種方法可以更改信息窗口的位置：

• 對信息窗口調(diào)用 setPosition()；

  
  

• 使用 InfoWindow.open() 方法將信息窗口附加到新標記上。注：如果您調(diào)用 open() 而不傳遞標

  
  

• 記，InfoWindow 將使用構(gòu)造時通過 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);
});