如何在JSF中将Javascript的结果动态保存到Bean中？_Javascript_Google Maps_Jsf_Jsf 2_Google Maps Api 3

如何在JSF中将Javascript的结果动态保存到Bean中？

javascript google-maps jsf jsf-2 google-maps-api-3

如何在JSF中将Javascript的结果动态保存到Bean中？,javascript,google-maps,jsf,jsf-2,google-maps-api-3,Javascript,Google Maps,Jsf,Jsf 2,Google Maps Api 3,我正在尝试使用谷歌地图中的自动完成地图，我的整个代码工作： <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml" xmlns:ui="http://java.sun.com/jsf/facelets" xmlns:h="http://java.sun.com/jsf/html" xmlns:f="http://java.sun.com/jsf/core"> <h:head&

我正在尝试使用

谷歌地图

中的

自动完成

地图，我的整个代码工作：

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml"
    xmlns:ui="http://java.sun.com/jsf/facelets"
    xmlns:h="http://java.sun.com/jsf/html" 
    xmlns:f="http://java.sun.com/jsf/core">

<h:head>

    <title>Places Autocomplete</title>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no"></meta>
    <meta charset="utf-8"></meta>
    <link href="/maps/documentation/javascript/examples/default.css" rel="stylesheet"></link>
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&amp;sensor=false&amp;libraries=places"></script>

    <style>
        html, body {
            height: 100%;
            margin: 0;
            padding: 0;
        }

        #map-canvas, #map_canvas {
            height: 100%;
        }

        @media print {
            html, body {
                height: auto;
            }

            #map_canvas {
                height: 650px;
            }
        }

        #panel {
            position: absolute;
            top: 5px;
            left: 50%;
            margin-left: -180px;
            z-index: 5;
            background-color: #fff;
            padding: 5px;
            border: 1px solid #999;
        }

        input {
            border: 1px solid  rgba(0, 0, 0, 0.5);
        }
        input.notfound {
            border: 2px solid  rgba(255, 0, 0, 0.4);
        }
    </style>

    <script>
    // <![CDATA[
        function initialize() {
          var mapOptions = {
            center: new google.maps.LatLng(-33.8688, 151.2195),
            zoom: 13,
            mapTypeId: google.maps.MapTypeId.ROADMAP
          };
          var map = new google.maps.Map(document.getElementById('map-canvas'),
            mapOptions);

          var input = /** @type {HTMLInputElement} */(document.getElementById('searchTextField'));
          var autocomplete = new google.maps.places.Autocomplete(input);

          autocomplete.bindTo('bounds', map);

          var infowindow = new google.maps.InfoWindow();
          var marker = new google.maps.Marker({
            map: map
          });

          google.maps.event.addListener(autocomplete, 'place_changed', function() {
            infowindow.close();
            marker.setVisible(false);
            input.className = '';
            var place = autocomplete.getPlace();
            if (!place.geometry) {
              // Inform the user that the place was not found and return.
              input.className = 'notfound';
              return;
            }

            // If the place has a geometry, then present it on a map.
            if (place.geometry.viewport) {
              map.fitBounds(place.geometry.viewport);
            } else {
              map.setCenter(place.geometry.location);
              map.setZoom(17);  // Why 17? Because it looks good.
            }
            marker.setIcon(/** @type {google.maps.Icon} */({
              url: place.icon,
              size: new google.maps.Size(71, 71),
              origin: new google.maps.Point(0, 0),
              anchor: new google.maps.Point(17, 34),
              scaledSize: new google.maps.Size(35, 35)
            }));
            marker.setPosition(place.geometry.location);
            marker.setVisible(true);

            var address = '';
            if (place.address_components) {
              address = [
                (place.address_components[0] && place.address_components[0].short_name || ''),
                (place.address_components[1] && place.address_components[1].short_name || ''),
                (place.address_components[2] && place.address_components[2].short_name || '')
              ].join(' ');
            }

            infowindow.setContent('<div><strong>' + place.name + '</strong><br>' + address);
            infowindow.open(map, marker);
          });

          // Sets a listener on a radio button to change the filter type on Places
          // Autocomplete.
          function setupClickListener(id, types) {
            var radioButton = document.getElementById(id);
            google.maps.event.addDomListener(radioButton, 'click', function() {
              autocomplete.setTypes(types);
            });
          }

          setupClickListener('changetype-all', []);
          setupClickListener('changetype-establishment', ['establishment']);
          setupClickListener('changetype-geocode', ['geocode']);
        }
        google.maps.event.addDomListener(window, 'load', initialize);
    // ]]>
    </script>
</h:head>

<h:body>
    <div id="panel" style="margin-left: -260px">
        <h:inputText id="searchTextField" value="#{propertyC.property.street}" size="100" >
            <f:ajax listener="#{propertyC.showAddress}" />
        </h:inputText>
    </div>

    <div id="map-canvas"></div>

</h:body>
</html>


位置自动完成
html，正文{
身高：100%；
保证金：0；
填充：0；
}
#地图画布，#地图画布{
身高：100%；
}
@媒体印刷品{
html，正文{
高度：自动；
}
#地图画布{
高度：650px；
}
}
#面板{
位置：绝对位置；
顶部：5px；
左：50%；
左边距：-180px；
z指数：5；
背景色：#fff；
填充物：5px；
边框：1px实心#999；
}
输入{
边框：1px实心rgba（0,0,0,0.5）；
}
input.notfound{
边框：2倍实心rgba（255,0,0,0.4）；
}
//

但是我想将这个自动完成操作的结果保存到我的bean属性

propertyC.property.street

中

我该怎么做呢？

试试看

document.getElementById(panel:searchTextField).value = <value you need to set>.

document.getElementById（面板：searchTextField）。值=。

输入组件需要进入表单组件内部，当通过JS方式更改值并依赖

change

事件时，还应该通过对HTML DOM元素的

onchange（）

函数调用手动触发事件

因此，在表单中：

<h:form id="searchForm">
    <h:inputText id="searchTextField" value="#{propertyC.property.street}" size="100">
        <f:ajax listener="#{propertyC.showAddress}" />
    </h:inputText>
</h:form>

你想在

place\u change

event fire时保存吗？实际上，我不知道哪个变量包含从自动完成列表中选择的新值。在你的情况下：google.maps.event.addListener（自动完成，'place\u changed'；…var place\u dest=autocomplete.getPlace（）；var vlocation=place_dest.geometry.location；//value

不是一个

NamingContainer

组件，更不用说JSF组件了。它只是一个基本的HTML，基本上是JSF.BalusC的纯模板文本，出于某种原因，如果我把

输入

放在

表单

中，就像你所建议的那样，映射根本不起作用re，只有在表单外部它才起作用，但我无法获得所选的值。我关心表单中的

id

，如您所示替换前缀，但到目前为止什么都没有。

var input = document.getElementById("searchForm:searchTextField");
input.value = newvalue;
input.onchange();