2014-12-03 161 views
0

我必须在使用JSF和javascript.Google地图显示标记,但我不知道这个问题。相同的代码在jsp中运行良好,但在jsf中运行得并不好,甚至没有在页面上显示地图。代码为JSF页面如下:JSF中的Google地图不起作用

<?xml version='1.0' encoding='UTF-8' ?> 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" 
     xmlns:f="http://java.sun.com/jsf/core" 
     xmlns:h="http://java.sun.com/jsf/html" 
     xmlns:c="http://xmlns.jcp.org/jsp/jstl/core" 
     xmlns:p="http://primefaces.org/ui"> 
    <head> 
     <meta http-equiv="content-type" content="text/html; charset=UTF-8" /> 
     <title>Google Maps Multiple Markers</title> 
     <script src="http://maps.google.com/maps/api/js?sensor=false" 
     type="text/javascript"></script> 
    </head> 
    <body> 
     <div id="map" style="width: 500px; height: 400px;"></div> 
     <script type="text/javascript"> 
      // <![CDATA[ 
      alert("hello"); 
      var locations = [ 
        <ui:repeat value = "#{loadBean.googleMapLocations}" var = "googleLocation" varStatus = "status" > 
        ['#{googleLocation.location}', '#{googleLocation.latitude}', '#{googleLocation.longitude}'] 
        < c:if test = "${!status.last}" > 
        , 
        < /c:if> 
        < /ui:repeat> 
      ] 
        alert(locations); 
      var map = new google.maps.Map(document.getElementById('map'), { 
       zoom: 10, 
       center: new google.maps.LatLng("${loadBean.centerLatitude}", "${loadBean.centerLongitude}"), 
       mapTypeId: google.maps.MapTypeId.ROADMAP 
      }); 

      var infowindow = new google.maps.InfoWindow(); 

      var marker, i; 

      for (i = 0; i < locations.length; i++) { 
       marker = new google.maps.Marker({ 
        position: new google.maps.LatLng(locations[i][1], locations[i][2]), 
        map: map 
       }); 

       google.maps.event.addListener(marker, 'click', (function(marker, i) { 
        return function() { 
         infowindow.setContent(locations[i][0]); 
         infowindow.open(map, marker); 
        } 
       })(marker, i)); 
      } 
      function saveForm(){ 
       alert("helo world"); 
      } 
      ]]> 
     </script> 
     <table> 
      <c:forEach var="googleLocation" items="${loadBean.googleMapLocations}"> 
       <tr><td>${googleLocation.latitude}</td><td>${googleLocation.longitude}</td></tr> 
      </c:forEach> 
      CENTER<tr><td>${loadBean.centerLatitude}</td><td>${loadBean.centerLongitude}</td></tr> 
     </table> 
     <f:view> 
     <h:form> 
     <p:commandButton type="button" onclick="return saveForm();" value="Button" /></h:form></f:view> 
    </body> 
</html> 

回答

0

尝试使用ui重复而不是forEach。

+0

这个UI有什么问题:在代码中重复。 – 2014-12-03 15:59:08