如何在Google Earth插件上放置一个html div？我想，涉及wmode

Question

我在网络应用程序中在Google地球插件上放置一个html div 时遇到问题，我们将不胜感激。

适用于地图，地形和混合模式，但在“地球”模式下， Flash会启动并自动将地图叠加在顶部。

Z-indexing无济于事。

据推测，我可以做类似的事情：

document.getElementById('flashDiv').setAttribute('wmode', 'opaque');

但考虑到谷歌的东西是动态编译的，这使得它变得更加困难。查看生成的代码在这里没有帮助。同样，由于它是在运行中编译的，像SWFObject这样的东西无法挽救这一天......

有没有人遇到类似的东西？我早上花了很多时间搜索Google Earth API组。

更新：经过更多的拉扯之后，答案可能在于iframe shim。我可能也得出结论，该插件是基于Flash的。调查...

_{（来源：googlepages.com）}

Answer 1

我在这里放了一个演示如何使用IFRAME垫片的演示：

http://earth-api-samples.googlecode.com/svn/trunk/demos/customcontrols/index.html

Answer 2

没有直接支持在Api或Dom中覆盖'z-indexing'div。 该插件加载了一个可执行文件，用一个非常简单的术语来打破浏览器窗口中的漏洞。使用'iframe shim'技术是标准的解决方法，尽管透明度可能很棘手。

这个功能有open Feature request可以添加到api中 - 评论部分有一些很好的信息和链接。

此外，还有很棒的在线demo of this here

Answer 3

如果是插件，则无法可靠地将其他元素放在其顶部。当插件涉及时，浏览器通常会释放大部分“层”元素的能力。

我想iframe可能是一种解决方法，只要你检查一下这仍然适用于大多数浏览器。

Answer 4

在调查Google用户嵌入代码的方式之后，它看起来就像是iFrame。不过，如果您遇到任何闪光问题，请参阅下文......

尝试在Flash元素（或YouTube视频上的html）上显示下拉导航时遇到类似情况。有几个因素发挥作用。

第一个是我的html元素，我想悬停在flash元素上必须是一个兄弟html元素，为每个兄弟元素设置css属性，也为父div设置。所以，例如：

<div id="parent">
  <div id="sibling"></div>
  <embed id=”flash”><other script code></embed>
</div>

那我的css就是

//.parent may not need to be set to relative
#parent   { position: relative; }
// the value on sibling1 just needs to be higher than .sibling2
#sibling  { position: relative; z-index: 20; }
#flash    { position: relative; z-index: 10; display:inline }

另一件值得注意的事情是你的flash需要将wmode参数设置为透明。

这个技巧适用于各种Flash应用程序以及YouTube视频 - 诀窍是确保要在Flash上​​显示的html是实际flash代码的兄弟元素，而不是父div，z-要在flash上​​显示的html的索引高于flash元素，两个html元素的定位都设置为相对或绝对，并且wmode参数设置为透明。

希望这有帮助 - 但我的猜测是你的问题在于iFrame。

Answer 5

设置＆＃34; iframe＆＃34; z-index为100

并将顶部z-index上显示的div设置为200（div必须至少位于相对位置）