利用GControl和GLayer对象在地图上显示panoramio图片

今天是Google map api的关于利用GControl和GLayer对象在地图上显示panoramio图片的教程，昨天我写了一篇Google map api的教程是关于在地图上添加控制按钮的（Google Map API教程之使用GControl对象在地图上添加control按钮），今天结合上篇文章，写一下怎么在地图上加一个可以显示panoramio的图片，使用的主要对象是GControl和GLayer对象。关于GControl对象的官方文档（请点这里），GLayer对象的官方文档（请点这里）

使用GLayer创建图片层对象

我们可以通过以下代码创建一个panoramio.com的图片层：
photoLayer=new GLayer("com.panoramio.all")
然后通过Gmap.addOverlay(photoLayer)添加这个层

谷歌地图的API支持的GLayer对象有谷歌webcam、panoramio、维基百科等，更多支持请点击查看：http://spreadsheets.google.com/pub?key=p9pdwsai2hDN-cAocTLhnag

使用GControl对象在地图上创建一个checkbox

这种方法就不多说了，具体GControl的使用，请看我之前写的关于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));
};

最终代码和实例

生活不易，码农辛苦
如果您觉得本网站对您的学习有所帮助,可以手机扫描二维码进行捐赠