GMap primefaces组件中的ContextMenu

时间:2013-05-14 14:03:24

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

有人知道如何创建一个将在右键单击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
});

有人能告诉我应该把什么放在听众身上吗?

1 个答案:

答案 0 :(得分:0)

所以这是我正在寻找的答案。在初始化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)的最简单方法是使用jQuery来监听mouseMove事件:

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