Google地圖官方API-在地圖上繪圖（彈出資訊視窗）

資訊視窗

介紹

顯示内容在地圖上方的彈出視窗（通常是文本或圖像），在給定位置。資訊視窗具有内容區域和錐形莖。莖的尖端連接配接到地圖上的指定位置。 InfoWindow

一個InfoWindow，顯示有關澳洲位置的資訊。

通常，您會将資訊視窗附加到 标記上，但也可以将資訊視窗附加到特定的緯度/經度，如下面有關添加資訊視窗的部分所述。

廣義上講，資訊視窗是一種疊加層。有關其他類型的疊加層的資訊，請參見 在地圖上繪制。

提示：如果要在标記上顯示單個文本字元，可以使用 标記标簽。

提示：檢視“ 商店定位器”解決方案 以擷取更多使用資訊視窗的示例。

添加資訊視窗

所述構造函數采用 對象常量，它指定用于顯示資訊視窗的初始參數。 InfoWindow InfoWindowOptions

該InfoWindowOptions對象常量包含以下字段：

content 包含要在資訊視窗中顯示的文本字元串或DOM節點。

pixelOffset包含從資訊視窗的尖端到資訊視窗錨定位置的偏移量。實際上，您無需指定此字段。您可以将其保留為預設值。

position包含LatLng錨定此資訊視窗的位置。注意：InfoWindow可以将an 附加到Marker對象（在這種情況下，其位置取決于标記的位置），也可以附加到指定位置的地圖本身LatLng。檢索a的一種方法LatLng是使用 地理編碼服務。在标記上打開資訊視窗會自動更新 position。

maxWidth指定資訊視窗的最大寬度（以像素為機關）。預設情況下，資訊視窗會擴充以适合其内容，如果資訊視窗填滿了地圖，則會自動換行文本。如果添加一個maxWidth資訊視窗，則會自動換行以強制執行指定的寬度。如果達到最大寬度并且螢幕上有垂直空間，則資訊視窗可能會垂直擴充。

的内容InfoWindow可能包含文本字元串，HTML片段或DOM元素。要設定内容，InfoWindowOptions請setContent()在或在InfoWindow顯式調用 上指定它。

如果希望顯式調整内容的大小，則可以将其放在

元素中并使用CSS設定樣式。您也可以使用CSS啟用滾動。請注意，如果您未啟用滾動并且内容超出了資訊視窗中的可用空間，則内容可能會溢出資訊視窗。

最佳做法：為了獲得最佳的使用者體驗，任何時候都隻能在地圖上打開一個資訊視窗。多個資訊視窗使地圖顯得混亂。如果一次隻需要一個資訊視窗，則可以僅建立一個InfoWindow對象，并在地圖事件（例如使用者單擊）時在不同的位置或标記處打開它。如果确實需要多個資訊視窗，則可以同時顯示多個 InfoWindow對象。

打開資訊視窗

建立資訊視窗時，它不會自動顯示在地圖上。要使資訊視窗可見，您需要在上調用open() 方法InfoWindow，将其傳遞Map給要打開的方法，還可以選擇将Marker其作為錨定的方法。如果未提供标記，則資訊視窗将在其position屬性中打開 。

// This example displays a marker at the center of Australia.

// When the user clicks the marker, an info window opens.

function initMap() {

var uluru = {lat: -25.363, lng: 131.044};

var map = new google.maps.Map(document.getElementById('map'), {

zoom: 4,
center: uluru           

});

var contentString = '

'+

'<div id="siteNotice">'+
  '</div>'+
  '<h1 id="firstHeading" class="firstHeading">Uluru</h1>'+
  '<div id="bodyContent">'+
  '<p><b>Uluru</b>, also referred to as <b>Ayers Rock</b>, is a large ' +
  'sandstone rock formation in the southern part of the '+
  'Northern Territory, central Australia. It lies 335&#160;km (208&#160;mi) '+
  'south west of the nearest large town, Alice Springs; 450&#160;km '+
  '(280&#160;mi) by road. Kata Tjuta and Uluru are the two major '+
  'features of the Uluru - Kata Tjuta National Park. Uluru is '+
  'sacred to the Pitjantjatjara and Yankunytjatjara, the '+
  'Aboriginal people of the area. It has many springs, waterholes, '+
  'rock caves and ancient paintings. Uluru is listed as a World '+
  'Heritage Site.</p>'+
  '<p>Attribution: Uluru, <a href="https://en.wikipedia.org/w/index.php?title=Uluru&oldid=297882194">'+
  'https://en.wikipedia.org/w/index.php?title=Uluru</a> '+
  '(last visited June 22, 2009).</p>'+
  '</div>'+
  '</div>';
           

var infowindow = new google.maps.InfoWindow({

content: contentString           

var marker = new google.maps.Marker({

position: uluru,
map: map,
title: 'Uluru (Ayers Rock)'           

marker.addListener('click', function() {

infowindow.open(map, marker);           

}

檢視示例。

以下示例設定maxWidth資訊視窗的： view example。

關閉資訊視窗

預設情況下，InfoWindow在使用者單擊關閉控件（資訊視窗右上角的叉号）之前，該控件保持打開狀态。如果願意，可以通過調用其close()方法顯式關閉資訊視窗。

移動資訊視窗

有兩種方法可以更改資訊視窗的位置：

緻電setPosition()資訊視窗，或

使用InfoWindow.open()方法将資訊視窗附加到新标記 。注意：如果調用時open() 未傳遞标記，則InfoWindow它将使用通過InfoWindowOptions對象文字構造時指定的位置 。

客制化

本InfoWindow類不提供定制。相反，請參閱 自定義彈出視窗示例， 以了解如何建立完全自定義的彈出視窗。