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

Question

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

它适用于地图，地形和混合模式，但在“地球”模式下，Flash会启动并自动将地图分层。

Z索引没有帮助。

大概我可以这样做：

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-index为在flash上​​显示的html高于flash元素，两个html元素的定位都设置为相对或绝对，wmode参数设置为透明。

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

Answer 5

将“iframe”z-index设置为100

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