Javascript 谷歌地球插件上下文菜单

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

---

有人这样做过吗？非常感谢您的帮助。

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

查看此页面以获取示例

请查看其他问题，了解更多信息

如果你感兴趣，你可以在这里看到我的网页，它在谷歌地球上使用iframe

---

您可以通过监听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
}

事件处理程序如下所示

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

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

// 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的一种情况-可能在菜单项上的另一个侦听器中（例如，当您单击菜单项时，菜单消失）

如果您被困在这里，这是处理事件的一个很好的参考。

此外，以下是iframe垫片技术的工作示例：

---

在您回答之前，我发现并使用了这种技术，但您的回答几乎与我的实现完全相同。我没有在左侧和顶部使用“px”，这有必要吗？谢谢你的回复，弗雷泽！好东西…是的，左和上的定义是“自动|长度|%|继承”。明确地添加长度单位是一个非常好的主意，因为它消除了任何关于您想要的像素还是百分比的模糊性。有些浏览器需要单位（FireFox），有些默认为像素（IE），有些则做其他事情。如果你想用像素，那就用它们吧！你说得对！！我完全忘记了像素与百分比的关系。这么简单的事情很容易忘记。再次感谢。