信息窗口

簡介

InfoWindow 在地圖上方給定位置的彈出窗口中顯示內容(通常為文本或圖像)。信息窗口具有一個內容區域和一個錐形柄。柄頂部與地圖上的某指定位置相連。

通常，您會將信息窗口附加到標記，但您也可以將信息窗口附加到特定緯度/經度，如下面的“添加信息窗口”部分所述。

添加信息窗口

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

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

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

pixelOffset：其中包含從信息窗口的頂部到信息窗口錨定位置的偏移量。實際上，您不應也無需修改此字段。您可以將其保留為默認值。

position：其中包含此信息窗口錨定位置的 LatLng。注：InfoWindow 可附加到 Marker對象(此情況下，其位置取決于標記的位置)，或附加到地圖本身指定的 LatLng 位置。在標記上打開信息窗口將自動更新 position。

maxWidth：用于指定信息窗口的最大寬度(以像素為單位)。默認情況下，信息窗口會根據其中包含的內容進行擴展，如果信息窗口填滿地圖，那么文本將會自動換行。如果您添加maxWidth，則信息窗口將自動換行以強制適應指定的寬度。如果信息窗口達到最大寬度，但屏幕上仍有垂直空間，則信息窗口可能會垂直擴展。

InfoWindow 的內容可包含文本字符串、HTML 代碼段或 DOM 元素。要設置此內容，請在 InfoWindowOptions 中指定該內容，或者對 InfoWindow 顯式調用 setContent()。

如果您想要顯式調整內容的大小，則可將其納入

元素中，并使用 CSS 設置 的樣式。您還可以使用 CSS 啟用滾動功能。請注意，如果您不啟用滾動功能，且內容超出信息窗口中可用的空間，則內容可能會溢出信息窗口。

打開信息窗口

創建信息窗口時，它不會自動顯示在地圖上。要使信息窗口可見，則需對 InfoWindow 調用 open() 方法，并向其傳遞其要在上面打開的 Map，也可以選擇向其傳遞其要錨定到的 Marker。如果沒有提供任何標記，則信息窗口將在其 position 屬性指定的位置處打開。

Info window with maxWidth

html, body {

height: 100%;

margin: 0;

padding: 0;

}

#map {

height: 100%;

}

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

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

// The maximum width of the info window is set to 200 pixels.

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 = '

'+

'

'+

'

'+

'

Uluru

'+

'

'+

'

Uluru, also referred to as Ayers Rock, is a large ' +

'sandstone rock formation in the southern part of the '+

'Northern Territory, central Australia. It lies 335?km (208?mi) '+

'south west of the nearest large town, Alice Springs; 450?km '+

'(280?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.

'+

'

Attribution: Uluru, '+

'https://en.wikipedia.org/w/index.php?title=Uluru '+

'(last visited June 22, 2009).

'+

'

'+

'

';

var infowindow = new google.maps.InfoWindow({

content: contentString,

//maxWidth: 200

});

var marker = new google.maps.Marker({

position: uluru,

map: map,

title: 'Uluru (Ayers Rock)'

});

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

infowindow.open(map, marker);

});

}

關閉信息窗口

默認情況下，InfoWindow 保持打開狀態，直至用戶點擊關閉控件(信息窗口右上角的叉號)。如果您需要，可以通過調用其 close() 方法來顯式關閉信息窗口。

移動信息窗口

對信息窗口調用 setPosition()

使用 InfoWindow.open() 方法將信息窗口附加到新標記上。注：如果您調用 open() 而不傳遞標記，InfoWindow 將使用構造時通過 InfoWindowOptions 對象字面量指定的位置。

自己的例子

總結

以上是生活随笔為你收集整理的php获取谷歌地图api接口,谷歌地图 API 开发之信息窗口的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。