一、 sGInfoWindow()
信息窗口GInfoWindow()對象是Google Maps API中用於提供信息的幾個對象之一。和GMaker()對象的title屬性相比,GInfoWindow()對象的功能要強大很多。GInfoWindow()不僅可以在GMaker()對象上顯示信息,還能在地圖上任意一點上顯示。內容上不僅可以使用簡單的文本,也可以使用HTML。下面將分別介紹如何在GMarker()和GMap2()上添加GInfoWindow()對象。
在GMarker()上使用GInfoWindow()信息可以通過兩種方法,分別是GMarker()對象的openInfoWindowHtml()方法和openInfoWindow()方法。分別使用如下:
1、_marker.openInfoWindowHtml("<div style='color:green;'>這是html代碼</div>");
2、var div=document.createElement("div");
div.style.color="blue";
div.innerHTML="這是一個DOM對象";
_marker.openInfoWindow(div);
注:其中marker是你創建的GMark()對象。
二、GInfoWindowTabs()
多標籤信息窗口類似於Tab頁。
1.創建GInfoWindowTab()對象
GInfoWindowTab()對象對應的就是多標籤信息窗口上的一個標籤,其創建方法如下。
new GInfoWindowTab(label, content)
其中,第一個參數label爲標籤名稱,普通字符串,但最大長度爲10。第二個參數content則爲標籤內顯示的內容。content參數比較特殊,既可以是HTML字符串,也可以是DOM對象,分別對應於不同的顯示GInfoWindowTabs()對象的方法。
2.創建一個GInfoWindowTab()的數組
Javascript創建數組的方法比較靈活。對於固定內容的標籤數組,直接使用"[…]"定義即可。示例如下。
var tabs = [new GInfoWindowTab("Tab1", "This is tab1"),
new GInfoWindowTab("Tab2", "This is tab2"),
……
new GInfoWindowTab("TabN", "This is tabN")];
對於內容需要更新的標籤數組,則可事先定義數組,然後爲其賦值。
var tabs = [];
……
tabs[0] = new GInfoWindowTab("Tab1", "This is tab1");
tabs[1] = new GInfoWindowTab("Tab2", "This is tab2"),
……
tabs[N] = new GInfoWindowTab("TabN", "This is tabN")];
除此之外,用new Array()的方法定義也是可以的。
3.在GMarker()上顯示GInfoWindowTabs()多標籤信息窗口對象
當GInfoWindowTab()的第2個參數content爲HTML字符串時,可用GMarker. openInfoWindowTabsHtml()進行顯示,其語法格式如下。
GMarker.openInfoWindowTabsHtml(tabs, opts?)
其中的第一個參數tabs即爲第2步中創建的那個數組,第2個參數opts也是GInfoWindowOptions對象,和相應的GMarker. openInfoWindowHtml()方法中的opts是一致的。
此例完整代碼如下。
類似的,還有一個GMarker.openInfoWindowTabs ()方法,其語法格式如下。
GMarker.openInfoWindowTabs (tabs, opts?)
幾乎和GMarker.openInfoWindowTabsHtml()方法完全一樣,只是其中的tabs參數中的GInfoWindowTab()對象是用DOM對象創建的,而非HTML字符串。
另外,GMap2地圖對象也有openInfoWindowTabsHtml()和openInfoWindowTabs()方法。它們和相應的GMarker中的方法唯一的區別也是--需要將信息窗口錨定點的座標作爲第一個參數傳遞。
最後在使用GInfoWindowTabs()多標籤信息窗口對象時有兩點需要注意。
第一條是當GInfoWindowTab標籤對象的數組只有一個元素時不會顯示標籤,而是和普通的信息窗口一樣。另上例中var tabs = [new GInfoWindowTab("Tab1", "<div style='width:400px'>This is tab2</div>")]。
另一個注意事項是,需要注意標籤內內容的寬度。如果上例中沒有設置div層的寬度爲400px,而是任其默認顯示,當標籤數量較多時,多標籤窗口將發生錯位,