Question

我正在使用primefaces布局来显示网页。地图位于中心布局

 here<p:layoutUnit position="center" resizable="false" closable="false" collapsible="false" collapsed="false" styleClass="ui-layout-center" >

<script src="http://maps.google.com/maps/api/js?sensor=true|false"
    type="text/javascript"/>


<h:form>
    <p:growl id="messages" showDetail="true" life="4000" />
    <p:gmap id ="map" center="#{mapBean.latCenter}, #{mapBean.lonCenter}" zoom="#{mapBean.zoomLevel}" type="ROADMAP"
        style="position:absolute;width:100%;height:100%" model="#{mapBean.model}"  widgetVar="gmap">
        <p:ajax event="stateChange" listener="#{mapBean.onStateChange}"
            update="messages, map" fixBounds="false"/>
    </p:gmap>

另外要找到窗口大小已更改，我使用java脚本

        function initialize() {

        var gmap = PF('gmap').getMap();
        var currentCenter = gmap.getCenter();
        gmap.setCenter(currentCenter);

    }
    google.maps.event.addDomListener(window, 'resize', initialize);

但是当我改变窗口的大小时 - 地图会部分显示。如果我使浏览器的窗口变大，则会显示地图，其大小与之前的小窗口相同。仅在我移动地图时帮助。移动地图后，地图会被正确重绘。我试着用

google.maps.event.trigger(gmap, "resize");

但它没有帮助。结果如下

Result of changing size of the window

如何使用javaScript和Primefaces解决这个问题？

Answer 1

我已经解决了我的问题。

1）我已检查过具有Inspect Element选项的页面 2）表单在div中转换的Fount 3）在google API上我找到了getDiv（） 4）更新div的样式 5）下一个代码正在运行

window.onresize = function(event) {

        var map = PF('gmapV').getMap();
        var MyDiv = map.getDiv();
        var height = $(window).height() - 50 - 100;
        var width = $(window).width() - 300 - 200;
        MyDiv.style.width = width.toString().concat("px");
        MyDiv.style.height = height.toString().concat("px");
        google.maps.event.trigger(map, 'resize');

    }

如何在窗口大小更改后强制重绘主要面的中心布局中的gmap？

1 个答案: