在Google地图上单击图标后在JSF中呈现面板

Question

我在jsf页面中使用谷歌地图。在使用谷歌地图之前，我以以下方式分配了图标值:

<a4j:commandLink render="assetSummaryMainPanel"
                                        status="nameStatus">
                                        <h:graphicImage
                                            url="#{appPath}/images/stock/#{childAsset.assetIconImageName}"
                                            title="#{childAsset.name}" alt="#{childAsset.name}"
                                            style="position:absolute;left:#{childAsset.modImageCoordinateX}px;top:#{childAsset.modImageCoordinateY}px;border:none;" />
                                        <a4j:param name="selectedSensor"
                                            value="#{childAsset.coModAssetId}"
                                            assignTo="#{AssetSummaryPageModel.selectedSensorId}" />
                                        </a4j:commandLink>

但是我需要使用谷歌地图，也需要分配值如上，以便它可以渲染面板从谷歌地图图标。我使用谷歌地图如下，但我不能在第一个命令链接中分配值。我怎么能做到呢?

<div id="imageMap" style="width:270px; height:350px;"></div>
       <script type="text/javascript">  
            var mapLocations = [[]];
            var centerMapLan = 0.0;
            var centerMapLong = 0.0;
       </script>
       <c:forEach items="#{asset.companyModuleAssets}" var="childAsset" varStatus="status">
           <script type="text/javascript">  
                mapLocations[#{status.index}] = ["#{appPath}/images/stock/#{childAsset.assetIconImageName}", "#{childAsset.name}", new google.maps.LatLng(#{childAsset.location.x}, #{childAsset.location.y}), #{childAsset.location.x}, #{childAsset.location.y}];
                centerMapLan = centerMapLan + #{childAsset.location.x};
                centerMapLong = centerMapLong + #{childAsset.location.y};
           </script> 

        </c:forEach>

        <script type="text/javascript"> 
           //  <![CDATA[
            $(document).ready(function() {
                // execute
                (function() {
                    // map options
                    var options = {
                        zoom: 18,
                        center: new google.maps.LatLng(centerMapLan/mapLocations.length, centerMapLong/mapLocations.length), // centered US
                        mapTypeId: google.maps.MapTypeId.SATELLITE,
                        mapTypeControl: false
                    };
                    // init map
                    var map = new google.maps.Map(document.getElementById('imageMap'), options);
                 // set multiple marker
                    for (var i = 0; i < mapLocations.length; i++) {
                        // init markers
                        var marker = new google.maps.Marker({
                            position: mapLocations[i][2],
                            map: map,
                            icon: mapLocations[i][0],
                            title: mapLocations[i][1]
                        });
                        // process multiple info windows
                        (function(marker, i) {
                            // add click event
                             google.maps.event.addListener(marker, 'click', function() {
                                infowindow = new google.maps.InfoWindow({
                                    content: mapLocations[i][1]
                                });
                                infowindow.open(map, marker);
                            }); 
                        })(marker, i);
                    }
                })();
            });
            //   ]]>    
            </script>

请帮忙

Answer 1

解决方案是，我们需要调用Listener下的方法，并将相应的图标id传递给该方法，然后在<a4j:jsFunction name="AjaxOpenAsset" render="assetSummaryMainPanel" > </a4j:jsFunction>内使用a4j:param。这应该行得通。: -)