利用GControl和GLayer對象在地圖上顯示panoramio圖片

今天是Google map api的關(guān)于利用GControl和GLayer對象在地圖上顯示panoramio圖片的教程，昨天我寫了一篇Google map api的教程是關(guān)于在地圖上添加控制按鈕的（Google Map API教程之使用GControl對象在地圖上添加control按鈕），今天結(jié)合上篇文章，寫一下怎么在地圖上加一個可以顯示panoramio的圖片，使用的主要對象是GControl和GLayer對象。關(guān)于GControl對象的官方文檔（請點這里），GLayer對象的官方文檔（請點這里）

使用GLayer創(chuàng)建圖片層對象

我們可以通過以下代碼創(chuàng)建一個panoramio.com的圖片層：
photoLayer=new GLayer("com.panoramio.all")
然后通過Gmap.addOverlay(photoLayer)添加這個層

谷歌地圖的API支持的GLayer對象有谷歌webcam、panoramio、維基百科等，更多支持請點擊查看：http://spreadsheets.google.com/pub?key=p9pdwsai2hDN-cAocTLhnag

使用GControl對象在地圖上創(chuàng)建一個checkbox

這種方法就不多說了，具體GControl的使用，請看我之前寫的關(guān)于GControl的教程（Google Map API教程之使用GControl對象在地圖上添加control按鈕）。這里就只是貼出來代碼：

function photoControl() {};
photoControl.prototype = new GControl();
photoControl.prototype.initialize = function(gmap){
var buttonDiv = document.createElement("div");
buttonDiv.id = "photoLayer";
var inputDiv=document.createElement("input");
inputDiv.type="checkbox";
inputDiv.id="photoCheckBox"
inputDiv.onclick=function(){
addPhotoLayer(this.checked)
}
buttonDiv.appendChild(inputDiv);
var labelFor=document.createElement("label");
labelFor.setAttribute("for","photoCheckBox");
labelFor.appendChild(document.createTextNode("看圖"));
buttonDiv.appendChild(labelFor);
gmap.getContainer().appendChild(buttonDiv);
return buttonDiv;
};

photoControl.prototype.getDefaultPosition = function(){
return new GControlPosition(G_ANCHOR_TOP_LEFT, new GSize(530, 7));
};

最終代碼和實例

生活不易，碼農(nóng)辛苦
如果您覺得本網(wǎng)站對您的學習有所幫助,可以手機掃描二維碼進行捐贈