Javascript Primefaces:从谷歌地图获取地理编码器地址到ManagedBean
我想将geocoder地址从GoogleMap传递到ManagedBean,但我必须在地图上选择两次,我想这是因为在地址传递到ManagedBean之前,会执行onPointSelect方法 ManagedBean:Javascript Primefaces:从谷歌地图获取地理编码器地址到ManagedBean,javascript,google-maps,jsf,primefaces,Javascript,Google Maps,Jsf,Primefaces,我想将geocoder地址从GoogleMap传递到ManagedBean,但我必须在地图上选择两次,我想这是因为在地址传递到ManagedBean之前,会执行onPointSelect方法 ManagedBean: private String mapAddress; public void onPointSelect(PointSelectEvent event) { LatLng latlng = event.getLatLng(); setMapAdd
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>
您不需要将元素附加到地图。 您可以使用:
<p:remoteCommand name="onPoint" actionListener="#{test.onPointSelect}" update="messages" />
您可以通过键/值对将参数从JavaScript传递到支持bean,并在FacesContext的帮助下在支持bean中接收这些参数:
onPoint([{name:'latitude',value:latitude},{name:'longitude',value:longitude}]);
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.
}
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>