GInfoWindow()和GInfoWindowTabs()的應用

一、 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,而是任其默認顯示,當標籤數量較多時,多標籤窗口將發生錯位,

發佈了27 篇原創文章 · 獲贊 3 · 訪問量 3萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章