2014-04-14 50 views
2

有沒有辦法在由PrimeFaces gmap component創建的google map object中調用fitBounds方法?我試了下面的代碼,但得到了javascript錯誤:TypeError: primefacesMap.fitBounds is not a function。看來fitBounds被PrimeFaces框架的布爾屬性覆蓋。fitBounds在PrimeFaces gmap組件

<h:head> 
    <script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"/> 
    <script type="text/javascript"> 
//<![CDATA[ 
    function initPrimefacesComponent(){ 
    var primefacesMap = gmtls.getMap(); 
    var bounds = new google.maps.LatLngBounds(); 
    var points = [ 
     new google.maps.LatLng(41.3, 2), 
     new google.maps.LatLng(41.309, 2) 
     ]; 
    // Extend bounds with each point 
    for (var i = 0; i < points.length; i++) { 
     bounds.extend(points[i]); 
     new google.maps.Marker({position: points[i], map: primefacesMap}); 
    } 
    // Apply fitBounds 
    primefacesMap.fitBounds(bounds); 
    } 
//]]> 
    </script> 
</h:head> 

<h:body onload="initPrimefacesComponent();" > 
    <p:gmap center="41.3, 2" zoom="15" type="ROADMAP" widgetVar="gmtls" 
    style="width:600px;height:400px" /> 
</h:body> 

下面是對於被不primefaces創建谷歌地圖對象的工作代碼:

<h:head> 
    <script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"/> 
    <script type="text/javascript"> 
//<![CDATA[ 
    function initOriginalMap() { 
    var mapOptions = { 
     center: new google.maps.LatLng(41.3, 2), 
     zoom: 15 
    }; 
    var originalMap = new google.maps.Map(document.getElementById("map-canvas"), 
     mapOptions); 
    var bounds = new google.maps.LatLngBounds(); 
    var points = [ 
     new google.maps.LatLng(41.3, 2), 
     new google.maps.LatLng(41.309, 2) 
     ]; 

    // Extend bounds with each point 
    for (var i = 0; i < points.length; i++) { 
     bounds.extend(points[i]); 
     new google.maps.Marker({position: points[i], map: originalMap}); 
    } 

    // Apply fitBounds 
    originalMap.fitBounds(bounds); 
    } 
    google.maps.event.addDomListener(window, 'load', initOriginalMap); 
//]]> 
    </script> 
</h:head> 

<h:body > 
    <div id="map-canvas" style="width:600px;height:400px"/> 
</h:body> 

回答

4

爲了使fitBounds工作PrimeFaces我不得不再次覆蓋由原始的源地圖的fitBounds財產:

//remember the property set by PrimeFaces 
var tmp = map.fitBounds; 

//replace the code by the one provided by google maps api 
map.fitBounds = google.maps.Map.prototype.fitBounds; 

//execute fitBounds function 
this.fitBounds(bounds); 

//restore PrimeFaces property (probably PrimeFaces use it somehow) 
this.fitBounds = tmp;