10、地圖屬性
默認(rèn)情況下,在 Google Map API 中,地圖使用標(biāo)準(zhǔn)的“繪制”圖塊顯示。但是,Google Map API也支持其他地圖類型。以下是標(biāo)準(zhǔn)地圖類型:
G_NORMAL_MAP- 默認(rèn)視圖
G_SATELLITE_MAP - 顯示 Google Earth衛(wèi)星圖像
G_HYBRID_MAP - 混合顯示普通視圖和衛(wèi)星視圖
G_DEFAULT_MAP_TYPES - 這三個(gè)類型的數(shù)組,在需要重復(fù)處理的情況下非常有用
可以使用 GMap2 對(duì)象的 setMapType() 方法設(shè)置地圖類型。例如,下面的代碼將地圖設(shè)置為使用 Google 地球的衛(wèi)星視圖:
var map = new GMap2(document.getElementById("mapContainer"));
map.setMapType(G_SATELLITE_MAP);
地圖還包含對(duì)了解情況非常有用的大量屬性。例如,要了解當(dāng)前視口的尺寸,可使用 GMap2 對(duì)象的 getBounds() 方法來返回 GLatLngBounds 值。
每個(gè)地圖還包含一個(gè)“縮放級(jí)別”,用于定義當(dāng)前視圖的分辨率。在普通地圖視圖內(nèi),可以使用 0(最低縮放級(jí)別,在地圖上可以看到整個(gè)世界)到 19(最高縮放級(jí)別,可以看到獨(dú)立建筑物)之間的縮放級(jí)別。縮放級(jí)別因所查看地區(qū)而異,因?yàn)榈厍蛏夏承┑貐^(qū)的數(shù)據(jù)比其他地區(qū)更詳細(xì)。在衛(wèi)星視圖中可以使用多達(dá)20個(gè)縮放級(jí)別。
可以通過使用 GMap2 對(duì)象的getZoom()方法檢索地圖當(dāng)前使用的縮放級(jí)別。關(guān)于縮放級(jí)別、地圖圖塊以及創(chuàng)建自己的自定義地圖類型的更多信息,請(qǐng)參閱自定義疊加層部分。
11、地圖交互
既然現(xiàn)在有了 GMap2 對(duì)象,就可以與之進(jìn)行交互了。基本地圖對(duì)象的外觀和行為與您在 Google 地圖網(wǎng)站上交互的地圖非常相似,并帶有大量?jī)?nèi)置行為。GMap2 對(duì)象還提供了大量配置方法來改變地圖對(duì)象本身的行為。
默認(rèn)情況下,和在 http://ditu.google.cn 上一樣,地圖對(duì)象會(huì)對(duì)用戶的活動(dòng)做出反應(yīng)。但您可以使用大量實(shí)用工具方法改變此行為。例如,GMap2.disableDragging() 方法禁止了點(diǎn)擊并拖拽地圖到新位置的功能。
您還可以通過編程與地圖交互。GMap2 對(duì)象支持可以直接改變地圖狀態(tài)的大量方法。例如,setCenter()、panTo() 和 zoomIn() 方法通過編程來操作地圖,而不是通過用戶交互來操作地圖。
下面的示例顯示一個(gè)地圖,等待兩秒鐘,然后平移到新中心點(diǎn)。panTo 方法將地圖中心設(shè)置在指定點(diǎn)處。如果指定點(diǎn)位于地圖的可見部分,則地圖會(huì)平穩(wěn)地平移到該點(diǎn),否則會(huì)跳至該點(diǎn)。(參考示例:MyTest3.html)
var map = new GMap2(document.getElementById("mapContainer"));
map.setCenter(new GLatLng(39.970981,116.314108), 16);
window.setTimeout(function() { map.panTo(new GLatLng(39.927, 116.407));}, 1000);
可以通過使用 Google 地圖 API 事件進(jìn)行更復(fù)雜的交互。
12、信息窗口
所有使用 Google 地圖 API的地圖都有可能顯示類型為 GInfoWindow 的單個(gè)“信息窗口”,該窗口在地圖上端以浮動(dòng)窗口顯示 HTML 內(nèi)容。信息窗口有點(diǎn)像漫畫書上的文字氣球;它有一個(gè)內(nèi)容區(qū)域和錐形引線,引線的頭在地圖的指定點(diǎn)上。點(diǎn)擊 Google 地圖上的標(biāo)記可以看到活動(dòng)的信息窗口。
GInfoWindow對(duì)象沒有構(gòu)造函數(shù)。當(dāng)創(chuàng)建地圖時(shí),會(huì)自動(dòng)創(chuàng)建一個(gè)信息窗口并將其附加到地圖上。對(duì)于指定的地圖,一次不能顯示多個(gè)信息窗口,但可以移動(dòng)信息窗口并可以更改其內(nèi)容(如果需要的話)。
GMap2對(duì)象提供了openInfoWindow()方法,該方法將一個(gè)點(diǎn)和一個(gè) HTML DOM 元素作為參數(shù)。HTML DOM元素附加到信息窗口容器中,信息窗口的尖端會(huì)固定在指定點(diǎn)上。
GMap2 的 openInfoWindowHtml()方法相似,但是它使用 HTML 字符串作為其第二個(gè)參數(shù)而不是 DOM 元素。
要?jiǎng)?chuàng)建信息窗口,請(qǐng)調(diào)用openInfoWindow方法,并向其傳遞位置和要顯示的 DOM 元素。下面的示例代碼顯示了一個(gè)信息窗口,該窗口錨定在地圖中心,內(nèi)容為一條簡(jiǎn)單消息“Hello, world”。(參考示例:MyTest4.html)
var map = new GMap2(document.getElementById("mapContainer"));
map.setCenter(new GLatLng(39.970981,116.314108), 16);
map.openInfoWindow(map.getCenter(), document.createTextNode("Hello, World!"));
有關(guān)信息窗口的完整文檔,請(qǐng)查閱Google Map API參考.
聯(lián)系客服