primefaces GMap 示例不工作，不知道为什么

Question

我对 gmap4jsf 有疑问。代码如下：

<f:view contentType="text/html">
        <h:form id="form">
            <p:growl id="msg" showDetail="true"/>
                        <p:gmap id="gmap" center="36.890257,30.707417" zoom="13" type="HYBRID"

                                style="width:600px;height:400px"
                                model="#{addPlaceBean.emptyModel}"
                                onPointClick="handlePointClick(event);"
                                widgetVar="map" disableDoubleClickZoom="true">

                        </p:gmap>

                        <p:dialog widgetVar="dlg">
                            <h:form prependId="false">
                                <h:panelGrid columns="1">
                                    <h:outputLabel value="Are you sure?"/>


                                    <f:facet name="footer">
                                        <p:commandButton value="Yes"
                                                         actionListener="#{addPlaceBean.addMarker}"
                                                         update=":form:msg"
                                                         oncomplete="markerAddComplete()"/>
                                        <p:commandButton value="Cancel" onclick="return cancel()"/>
                                    </f:facet>
                                </h:panelGrid>

                                <h:inputHidden id="lat" value="#{addPlaceBean.lat}"/>
                                <h:inputHidden id="lng" value="#{addPlaceBean.lng}"/>
                            </h:form>
                        </p:dialog>

                        <script type="text/javascript">
                            var currentMarker = null;

                            function handlePointClick(event) {

                                console.log("click event");

                                console.log(event.marker);

                                if (currentMarker == null) {
                                    document.getElementById('lat').value = event.latLng.lat();
                                    document.getElementById('lng').value = event.latLng.lng();

                                    currentMarker = new google.maps.Marker({
                                        position: new google.maps.LatLng(event.latLng.lat(), event.latLng.lng())
                                    });

                                    map.addOverlay(currentMarker);

                                    dlg.show();
                                }
                            }

                            function markerAddComplete() {
                        //currentMarker = null; Only one can be added.
                                dlg.hide();
                            }

                            function cancel() {
                                dlg.hide();
                                currentMarker.setMap(null);
                                currentMarker = null;

                                return false;
                            }
                        </script>
            </h:form>
    </f:view>

这是支持 bean：

public void addMarker(ActionEvent actionEvent) { 
    System.err.println("Adding marker");
    Marker marker = new Marker(new LatLng(lat, lng), title);  
    emptyModel.addOverlay(marker);  

    addMessage(new FacesMessage(FacesMessage.SEVERITY_INFO, "Marker Added", "Lat:" + lat + ", Lng:" + lng));  
}

如您所见，它取自 primefaces 使用 gmap 的“添加标记”示例。我使用的primefaces是3.5。问题是，当我双击地图添加标记时，什么也没有发生！ addMarker(ActionEvent actionEvent) 未执行，javascript 函数 handlePointClick(event) 一直执行到 currentMarker = new google.maps.Marker({ position: new google.maps.LatLng(event.latLng.lat(), event.latLng.lng()) }); 行，然后中断（用警报检查 - 在此行之后不显示）。没有发现异常。坦率地说，我不知道发生了什么（javascript 知识不是我的优点）。我尝试删除 p:dialog 中的 <h:form> 标签，但它不起作用。当我将disableDoubleClickZoom 属性更改为false 时，地图正在放大而不是显示对话框。

你能告诉我我做错了什么或者给我一个很好的例子吗？

提前致谢。

Answer 1

好的，

我做到了。方法如下：

   <p:gmap model="#{addPlaceBean.emptyModel}" center="41.381542, 2.122893" zoom="10" type="ROADMAP" style="width:600px;height:600px" id="map">  
         <p:ajax event="pointSelect" listener="#{addPlaceBean.onPointSelect}" update="msg map" />
         <p:ajax event="overlaySelect" listener="#{addPlaceBean.onMarkerSelect}" update="msg" />
   </p:gmap>

在支持 bean 中：

public void onPointSelect(PointSelectEvent event) {
    System.out.println("Add marker title: " + title);
    LatLng latlng = event.getLatLng();
    addMessage(new FacesMessage(FacesMessage.SEVERITY_INFO, "Dodano marker.", ""));
    emptyModel = new DefaultMapModel();
    Marker marker = new Marker(latlng, title);
    emptyModel.addOverlay(marker);
}

Answer 2

替换

document.getElementById('lat').value = event.latLng.lat();

由

document.getElementById('form:lat').value = event.latLng.lat();