程序员人生 网站导航

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

栏目:jscript时间:2014-03-26 19:10:20

今天是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));
};

最终代码和实例

var gmap=null,photoLayer=new GLayer("com.panoramio.all");

function init(){
if (GBrowserIsCompatible()) {
gmap = new GMap2(document.getElementById("gmap"));
gmap.setCenter(new GLatLng(36.105,120.34), 12);
gmap.setUI(gmap.getDefaultUI());
gmap.enableScrollWheelZoom();

gmap.addControl(new photoControl());
}
}
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));
};
function addPhotoLayer(checked){
if (checked) {
gmap.addOverlay(photoLayer);
}
else {
gmap.removeOverlay(photoLayer);
}
}
出处:http://www.js8.in/566.html
------分隔线----------------------------
------分隔线----------------------------

最新技术推荐