最近项目需要google earth有关的技术点,遇见了要在google earth上面添加浮动层的问题。怎么设置z-index也没发使得元素在earth上面显示,总是被压下去。
补充:google map没有此类问题,设z-index就可以控制浮动层的位置。
查了好多资料,才发现也有其他人遇见。好像是google earth固有的“缺陷”。
解决办法:
利用动态生成iframe讲图片添加进去并设置z-index。iframe-shim-for-google-earth
经典代码阶段:
//本地的html按钮
function createNativeHTMLButton(x, y, width, height,id) {
// 创建浮动层
var button = document.createElement("div");
button.className="nxte";
button.id=id;
var ahref = document.createElement('a');
ahref.href = '#';
button.appendChild(ahref);
// create an IFRAME shim for the button
var iframeShim = document.createElement('iframe');
iframeShim.frameBorder = 0;
iframeShim.id=id+"Iframe";
iframeShim.scrolling = 'no';
iframeShim.src = (navigator.userAgent.indexOf('MSIE 6') >= 0) ?
'' : 'javascript:void(0);';
// position the button and IFRAME shim
var pluginRect = getElementRect(document.getElementById('earth'));
button.style.position = iframeShim.style.position = 'absolute';
button.style.left = iframeShim.style.left = (pluginRect.left + x) + 'px';
button.style.top = iframeShim.style.top = (pluginRect.top + y) + 'px';
button.style.width = iframeShim.style.width = width + 'px';
button.style.height = iframeShim.style.height = height + 'px';
// set up z-orders
button.style.zIndex = 10;
iframeShim.style.zIndex = button.style.zIndex - 1;
document.body.appendChild(button);
document.body.appendChild(iframeShim);
}
/**
* Helper function to get the rectangle for the given HTML element.
*/
function getElementRect(element) {
var left = element.offsetLeft;
var top = element.offsetTop;
var p = element.offsetParent;
while (p && p != document.body.parentNode) {
if (isFinite(p.offsetLeft) && isFinite(p.offsetTop)) {
left += p.offsetLeft;
top += p.offsetTop;
}
p = p.offsetParent;
}
return { left: left, top: top,
width: element.offsetWidth, height: element.offsetHeight };
}
引用:createNativeHTMLButton(left, top, 14, 49,"nxte");
一个很好的demo:http://lineandpixel.com/blog/iframe-shim-for-google-earth
分享到:
相关推荐
googleearth模三图层制作工具及说明
GoogleEarth GoogleEarth GoogleEarth
如何下载谷歌地球 Google Earth 中的卫星地图
Google Earth 中文指南 Google Earth 中文指南 Google Earth 中文指南
适用于GoogleEarth连接不到服务器的情况,将C:\Windows\System32\drivers\etc下的文件替换即可
googleearth标注点位及添加路径\googleearth添加路径.xls
Google Earth API开发,Google Earth API开发Google Earth API开发Google Earth API开发
Google Earth整合Google的本地搜索以及驾车指南两项服务,能够鸟瞰世界,将取代目前的桌面搜索软件。他可以在虚拟世界中如同一只雄鹰在大峡谷中自由飞翔,登陆峡谷顶峰,潜入峡谷深渊。 Google Earth采用的3D地图...
Google Earth整合Google的本地搜索以及驾车指南两项服务,能够鸟瞰世界,将取代目前的桌面搜索软件。他可以在虚拟世界中如同一只雄鹰在大峡谷中自由飞翔,登陆峡谷顶峰,潜入峡谷深渊。 Google Earth采用的3D地图...
Google Earth Plus5.0中文破解版
Google Earth整合Google的本地搜索以及驾车指南两项服务,能够鸟瞰世界,将取代目前的桌面搜索软件。他可以在虚拟世界中如同一只雄鹰在大峡谷中自由飞翔,登陆峡谷顶峰,潜入峡谷深渊。 1月31日消息,谷歌地球专业版...
如何在OsgEarth中加载谷歌卫星地图的ArcGISServer服务教程
在VC应用窗口中显示Google Earth的图片窗口
Google Earth采用的3D地图定位技术能够把Google Map上的最新卫星图片推向一个新水平。用户可以在3D地图上搜索特定区域,放大缩小虚拟图片,然后形成行车指南。此外,Google Earth还精心制作了一个特别选项——鸟瞰...
GOOGLE EARTH
Google Earth(谷歌地球) V5.2.1.1588.EXE Google Earth(谷歌地球) V5.2.1.1588.EXE Google Earth(谷歌地球) V5.2.1.1588.EXE Google Earth(谷歌地球) V5.2.1.1588.EXE Google Earth(谷歌地球) V5.2.1.1588.EXE
Google Earth KML文件生成工具可以协助我们将cad数据直接匹配到google earth
Google Earth KML中文说明
通过google earth直接获取高分辨率的大地图。 基本原理还是逐个截屏,然后拼起来...运行这个版本的google earth后,再直接运行附件中的程序,界面还是比较简单,如果实在有困难,可以和我联系。bigstone1998@sina.com.
Google earth打不开或者黑屏问题的解决办法