加入收藏 | 设为首页 | 会员中心 | 我要投稿 PHP编程网 - 黄冈站长网 (http://www.0713zz.com/)- 数据应用、建站、人体识别、智能机器人、语音技术!
当前位置: 首页 > 创业 > 模式 > 正文

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

发布时间:2018-09-03 11:35:35 所属栏目:模式 来源:站长网
导读:今天是Google map api的关于利用GControl和GLayer对象在地图上显示panoramio图片的教程,昨天我写了一篇Google map api的教程是关于在地图上添加控制按钮的(Google Map API教程之使用GControl对象在地图上添加control按钮),今天结合上篇文章,写一下怎

今天是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

(编辑:PHP编程网 - 黄冈站长网)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    推荐文章
      热点阅读