Question

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

<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>

但我需要使用谷歌地图，还需要如上所述分配值，以便它可以从谷歌地图图标渲染面板。我正在使用谷歌地图如下，但我无法在第一个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。这应该工作。 :-)

在谷歌地图中点击图标后，在jsf中渲染面板

1 个答案: