google earth 中有关浮动层的添加问题

系统 1469 0

最近项目需要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

google earth 中有关浮动层的添加问题

google earth 中有关浮动层的添加问题


更多文章、技术交流、商务合作、联系博主

微信扫码或搜索:z360901061

微信扫一扫加我为好友

QQ号联系: 360901061

您的支持是博主写作最大的动力,如果您喜欢我的文章,感觉我的文章对您有帮助,请用微信扫描下面二维码支持博主2元、5元、10元、20元等您想捐的金额吧,狠狠点击下面给点支持吧,站长非常感激您!手机微信长按不能支付解决办法:请将微信支付二维码保存到相册,切换到微信,然后点击微信右上角扫一扫功能,选择支付二维码完成支付。

【本文对您有帮助就好】

您的支持是博主写作最大的动力,如果您喜欢我的文章,感觉我的文章对您有帮助,请用微信扫描上面二维码支持博主2元、5元、10元、自定义金额等您想捐的金额吧,站长会非常 感谢您的哦!!!

发表我的评论
最新评论 总共0条评论