Primefaces：从谷歌地图获取地理编码器地址到 ManagedBean答案

【问题标题】：Primefaces : get geocoder address from google Map to ManagedBeanPrimefaces：从谷歌地图获取地理编码器地址到 ManagedBean
【发布时间】：2014-07-03 15:42:30
【问题描述】：

我想将geocoder地址从谷歌地图传给ManagedBean，但是我必须在地图上选择两次，我想是因为方法（onPointSelect）是在地址传给ManagedBean之前执行的

托管豆：

private String mapAddress;

public void onPointSelect(PointSelectEvent event) {

        LatLng latlng = event.getLatLng();
        setMapAddress(FacesContext.getCurrentInstance().getExternalContext().getRequestParameterMap().get("myForm:address"));
        addMessage(new FacesMessage(FacesMessage.SEVERITY_INFO, "Point Selected", "Lat:" + latlng.getLat() + ", Lng:" + latlng.getLng() + " Address: " + getMapAddress()));    
    }

XHTML：

       <h:form id="myForm" >
        <p:growl id="messages" showDetail="true" life="2000"  />

        <p:gmap center="41.381542, 2.122893" zoom="15" type="ROADMAP" widgetVar="map"  style="width:600px;height:400px" onPointClick="handlePointClick(event);" >

            <p:ajax event="stateChange"  listener="#{test.onStateChange}"  />

            <p:ajax event="pointSelect"  listener="#{test.onPointSelect}"     update="messages" />

        </p:gmap> 
        <h:inputHidden  id="address" value="#{test.mapAddress}"/>
    </h:form>

    <script type="text/javascript" >
        //var ma = document.getElementById('myForm:address');
        function handlePointClick(event) {

            if (navigator.geolocation)
            {
                browserSupportFlag = true;
                var latlng = event.latLng;
                geocoder = new google.maps.Geocoder();
                geocoder.geocode({'latLng': latlng}, function(results, status)
                {
                    if (status === google.maps.GeocoderStatus.OK)
                    {
                        //alert( results[0].formatted_address );
                        document.getElementById('myForm:address').value = results[0].formatted_address;

                        //jQuery("#address").val(results[0].formatted_address);
                        //jQuery("#addressBtn").click();
                        //alert( document.getElementById('myForm:address').value ); 

                    }
                });
            }
        }

    </script>

【问题讨论】：

标签： javascript google-maps jsf primefaces

【解决方案1】：

code after modification :

private String mapAddress;
private double lat;
private double lng;

public void onPointSelect(ActionEvent event) {
        addMessage(new FacesMessage(FacesMessage.SEVERITY_INFO, "Point Selected", "Lat:" + getLat() + ", Lng:" + getLng() + " Address: " + getMapAddress()));
    }

XHTML :

<h:form  prependId="false">
            <p:growl id="messages" showDetail="true" life="2000"  />

            <p:gmap center="41.381542, 2.122893" id="map" zoom="15" type="ROADMAP" widgetVar="map"  style="width:600px;height:400px" onPointClick="handlePointClick(event);"  >

            </p:gmap> 
            <p:remoteCommand name="onPoint" actionListener="#{test.onPointSelect}" update="messages" />
            <h:inputHidden  id="address"  value="#{test.mapAddress}" >

            </h:inputHidden>
            <h:inputHidden id="lat" value="#{test.lat}" />
            <h:inputHidden id="lng" value="#{test.lng}" />

        </h:form>

<script type="text/javascript" >
            function handlePointClick(event) {

                if (navigator.geolocation)
                {
                    browserSupportFlag = true;
                    var latlng = event.latLng;
                    geocoder = new google.maps.Geocoder();
                    geocoder.geocode({'latLng': latlng}, function(results, status)
                    {
                        if (status === google.maps.GeocoderStatus.OK)
                        {
onPoint([{name: 'address', value:results[0].formatted_address}, {name: 'lng', value:event.latLng.lng()}, {name: 'lat', value: event.latLng.lat()}]);

                        }
                    });
                }
            }
        </script>

【讨论】：

【解决方案2】：

您无需将<p:ajax>Element 附加到地图。你可以使用：

 <p:remoteCommand name="onPoint" actionListener="#{test.onPointSelect}" update="messages" />

必须嵌入<h:form>。您可以通过以下方式在 JavaScript 函数中触发此 Ajax 请求：

onPoint([{name:'latitude',value:latitude},{name:'longitude',value:longitude}]);

您可以通过键/值对将参数从 JavaScript 传递到支持 bean，并在 FacesContext 的帮助下在支持 bean 中接收这些参数：

    public void onPointSelect(PointSelectEvent event) {
        Map<String,String> params = FacesContext.getCurrentInstance().getExternalContext().getRequestParameterMap();
        Double latitude = Double.parseDouble(params.get("latitude"));
        Double longitude = Double.parseDouble(params.get("longitude"));
            //etc.
    }

【讨论】：