当前位置：文江博客话题详情

google-maps google-earth-plugin google-earth

如何在 Google 地球插件上放置 html div？我想涉及到wmode

发布于 2024-07-13 01:19:05 字数 967 浏览 13 评论 0 原文

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

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

Z 索引没有帮助。

想必我可以做类似的事情：

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

但考虑到谷歌的东西是动态编译的，这使得它变得更加困难。查看生成的代码在这里没有帮助。再说一次，由于它是动态编译的，像 SWFObject 这样的东西无法拯救世界......

有人遇到过类似的事情吗？我花了一个早上的时间搜索 Google Earth API 组，但没有多大效果。

更新：经过更多的拉扯，答案可能在于iframe 填充程序。我可能也得出了这个插件是基于 Flash 的结论。正在调查...

_{（来源：googlepages.com）}

原文

I'm having trouble laying a html div over the Google Earth plugin in a web application, any help would be appreciated.

It's fine for Map, Terrain and Hybrid mode, but on 'Earth' mode, the Flash kicks in and automatically layers the map on top.

Z-indexing doesn't help.

Presumably I could do something like:

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

but given that Google's stuff is compiled on the fly, it makes it much more difficult. Viewing the generated code hasn't helped here. Again, due to it being compiled on the fly, stuff like SWFObject can't save the day...

Has anyone encountered anything similar? I've spent the morning trawling the Google Earth API group without much avail.

Update: After more hair-pulling, the answer may lie with an iframe shim. I may have also jumped to the conclusion that the plugin is Flash-based. Investigating...

_{(source: googlepages.com)}

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

旧话新听 2024-07-20 01:19:05

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

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

回复收藏 0 原文

ま昔日黯然 2024-07-20 01:19:05

在 Api 或 Dom 中都不直接支持在 div 上覆盖“z 索引”。
该插件加载一个可执行文件，用非常简单的术语来说，就是在浏览器窗口中打一个洞。使用“iframe shim”技术是标准的解决方法，尽管透明度可能很棘手。

有一个开放的功能请求< /a> 将此功能添加到 api - 评论部分有一些很好的信息和链接。

另外，这里有一个很棒的在线演示

回复收藏 0 原文

起风了 2024-07-20 01:19:05

如果它是一个插件，那么您无法可靠地将其他元素放置在其顶部。当涉及插件时，浏览器通常会放弃大部分“分层”元素的能力。

我想 Iframe 可能是解决这个问题的一种方法，只要你检查它是否仍然适用于大多数浏览器。

回复收藏 0 原文

羁客 2024-07-20 01:19:05

在研究了 Google 让用户嵌入代码的方式后，看起来它是通过 iFrame 嵌入的。不过，如果您在使用 Flash 时遇到任何问题，请参阅下文...

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

第一个是我想要将鼠标悬停在 flash 元素上的 html 元素，该元素必须是同级 html 元素，并且为每个同级元素以及父 div 设置了 css 属性。因此，例如：

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

希望这会有所帮助 - 但我的猜测是您的问题与 iFrame 有关。

After looking into the way Google has users embed the code, it looks like it's with an iFrame. Still, if your running into any issues with a flash, see below...

Running into similar situations with trying to display a dropdown navigation over a flash element (or html over a YouTube video). There were a few factors that came into play.

The first was my html element that I wanted to hover over the flash element had to be a sibling html element with the css properties set for each sibling element and also for the parent div. So, for example:

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

Then my css would be

//.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 }

The other thing worth noting is your flash needs to have the wmode parameter set to transparent.

This trick has worked for various flash applications as well as YouTube Video's - the trick is to make sure the html you want to display over the flash is a sibling element to the actual flash code and not the parent div, the z-index for the html to display over the flash is higher than the flash element, both html elements have their positioning set to either relative or absolute, and the wmode parameter is set to transparent.

Hopefully this helps - but my guess is that your issue is with the iFrame.

回复收藏 0 原文