我一直在使用 Google 地球插件来构建特定功能,我想做的其中一件事就是在 GE 上创建我自己的上下文菜单。
有人做过吗?非常感谢任何帮助。
最佳答案
您可以通过监听 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
关于javascript - Google 地球插件上下文菜单,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/9912383/