Question

我一直在使用Google地球插件来构建特定的功能，而我想做的其中一件事就是在GE上创建自己的上下文菜单。

有人这样做过吗？非常感谢任何帮助。

Answer 1

目前，您需要使用IFRAME SHIMS。希望有一天会改变。

查看此页面以获取示例 http://earth-api-samples.googlecode.com/svn/trunk/demos/customcontrols/index.html

并查看关于SO的其他问题以获取更多信息 How can I place a html div over the Google Earth plugin? Involves wmode, I imagine

如果您有兴趣，可以在此处查看我的网页，该网页使用iframe来覆盖谷歌地球 http://www.3dwhistler.com/

Answer 2

您可以通过侦听mouseup或click事件然后使用垫片覆盖技术来显示自定义上下文菜单来实现此目的。

事件监听器的代码如下所示。

// Listen for all mouseup events in the plugin.
// Where 'ge' is an instance of the GEPlugin
google.earth.addEventListener(ge.getWindow(), 'mouseup', eventHandler);

事件处理程序类似于以下内容。

// Handles mouseup events (e is a KmlMouseEvent)
var eventHandler = function(e)
{
  // if it is a right-click 
  if (e && e.getButton() == 2)
  {
    event.preventDefault(); // optional, depending on your requirements
    event.stopPropagation(); // optional, depending on your requirements
    openMenu(e.getScreenX(), e.getScreenY());
  }
}

最后，打开自定义菜单的代码如下所示。

// Insert a custom iframe at the x, y screen position 
var openMenu = function(x, y)
{
  var iframe = document.createElement('iframe');
  iframe.frameBorder = 0;
  iframe.scrolling = 'no';
  iframe.style.position = 'absolute';

  // build the menu as you require...
  // then position and show it.
  iframe.style.left = x + 'px'; 
  iframe.style.top = y + 'px'; // you may want to offset the position...

  document.body.appendChild(iframe ); // show the menu
}

显然，您在菜单中添加了什么以及如何设置样式取决于您。您可能也想要隐藏它，这只是删除iframe的情况 - 可能是在菜单项上的另一个监听器中（例如，当您单击菜单项时菜单消失）

如果你被困在这里是一个很好的参考来处理事件。 https://developers.google.com/earth/documentation/events

此外，这是iframe填充技术的一个工作示例： http://earth-api-samples.googlecode.com/svn/trunk/demos/customcontrols/index.html

Google地球插件上下文菜单

2 个答案: