javascript - Google 地球插件上下文菜单

Question

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

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

Answer 1

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

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

// 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 shim 技术的一个工作示例: http://earth-api-samples.googlecode.com/svn/trunk/demos/customcontrols/index.html