primefaces GMap示例不起作用,不知道为什么

时间:2013-09-25 07:41:10

标签: javascript google-maps jsf primefaces

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));  
}

正如您所看到的,它取自使用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()) });行,然后中断(使用alert检查 - 在此行之后不显示)。没有例外注意到。坦率地说,我不知道发生了什么(javascript知识不是我的好方面)。我试图删除<h:form>中的p:dialog标记,但它无效。当我将disableDoubleClickZoom属性更改为false时,地图会放大而不是显示对话框。

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

提前致谢。

2 个答案:

答案 0 :(得分:2)

确定,

我做到了。方法如下:

   <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);
}

答案 1 :(得分:-1)

替换

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

通过

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