GMap primefaces 组件中的 ContextMenu答案

【问题标题】：ContextMenu in GMap primefaces componentGMap primefaces 组件中的 ContextMenu
【发布时间】：2013-05-14 14:03:24
【问题描述】：

有人知道如何创建一个将在 GMap 上单击鼠标右键时启动的 primefaces 上下文菜单吗？

通常代码应该是这样的：

<p:gmap id="gmapElement" widgetVar="gmtls" center="41.381542, 2.122893" zoom="15" type="hybrid" styleClass="mapClass"/>
<p:contextMenu for="gmapElement" >  
    <p:menuitem value="Method A" onclick="method1()" />  
    <p:menuitem value="Method B" onclick="method2()" />  
</p:contextMenu>

但是，google api 会覆盖右键单击事件。我认为处理它的最佳方法是在谷歌地图中增加监听器。但我找不到任何信息如何以编程方式显示上下文菜单：

var mapComponent = gmtls.getMap();
google.maps.event.addListener(mapComponent, 'rightclick', function(mouseEvent) {
    //show context menu at coordinates: mouseEvent.latLng
});

谁能告诉我应该在监听器主体中放什么？

【问题讨论】：

这可能会对您有所帮助：stackoverflow.com/a/16446515/1834700
谢谢，这很有帮助:)
如果你找到了你的答案，你应该发布为答案！

标签： google-maps google-maps-api-3 primefaces primefaces-gmap

【解决方案1】：

这就是我一直在寻找的答案。在初始化 GMap 组件期间，必须在 google maps API 中注册额外的侦听器：

var mapComponent = gmtls.getMap();
google.maps.event.addListener(mapComponent, 'rightclick', function(mouseEvent) {
    $(PrimeFaces.escapeClientId('mainForm:contextMenu')).css({
        top: yPos+'px',
        left: xPos+'px'                        
    }).show();
});

获取坐标（yPos、xPos）的最简单方法是使用监听 mouseMove 事件的 jQuery：

var xPos = 0;
var yPos = 0;
jQuery(document).ready(function(){
    $(document).mousemove(function(e){
        xPos = e.pageX;
        yPos = e.pageY;
    }); 
})

【讨论】：