PrimeFaces gmap组件中的fitBounds(fitBounds in PrimeFaces gmap component)

PrimeFaces gmap组件中的fitBounds(fitBounds in PrimeFaces gmap component)

有没有办法在PrimeFaces gmap组件创建的谷歌地图对象中调用fitBounds方法？ 我尝试了下面的代码，但得到javascript错误： TypeError: primefacesMap.fitBounds is not a function 。 似乎fitBounds被PrimeFaces框架的布尔属性覆盖。

<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创建的Google地图对象的代码：

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

Is there a way to call fitBounds method in the google map object created by PrimeFaces gmap component? I tried the code below, but get javascript error: TypeError: primefacesMap.fitBounds is not a function. It appears that fitBounds is overriden by a boolean property by PrimeFaces framework.

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

Below is the code that works for google map object that is created without 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>

最满意答案

为了使fitBounds在PrimeFaces fitBounds工作，我必须再次覆盖原始源的地图的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;

To make fitBounds work in PrimeFaces I had to override again the fitBounds property of the map by original source:

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