更改窗口大小后，如何强制gmap重新绘制素面的中心布局内部？

Andrey 发表于 Dev

安德烈

我正在使用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");

但这没有帮助。结果如下

改变窗口大小的结果

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

安德烈

我已经解决了我的问题。

1）我检查了带有Inspect Element选项的页面2）注意到表单在div中进行了转换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');

    }

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。