javascript - PrimeFaces gmap 组件中的 fitBounds

Question

有没有办法在 google map object 中调用 fitBounds 方法？由 PrimeFaces 创建 gmap component ？我尝试了下面的代码，但出现了 javascript 错误:TypeError: primefacesMap.fitBounds is not a function。 fitBounds 似乎被 PrimeFaces 框架的 bool 属性覆盖。

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

Answer 1

为了使 fitBounds 在 PrimeFaces 中工作，我不得不再次覆盖原始来源的 map 的 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;