利用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的图片层: 谷歌地图的API支持的GLayer对象有谷歌webcam、panoramio、维基百科等,更多支持请点击查看:http://spreadsheets.google.com/pub?key=p9pdwsai2hDN-cAocTLhnag 使用GControl对象在地图上创建一个checkbox这种方法就不多说了,具体GControl的使用,请看我之前写的关于GControl的教程(Google Map API教程之使用GControl对象在地图上添加control按钮)。这里就只是贴出来代码: function photoControl() {}; 最终代码和实例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 (编辑:好传媒网) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |