Question

我在div display:none;内有一个GMap。

div内部是PrimeFaces地图组件。

点击按钮后，应显示div元素的内容，但只显示空白页。

<div class="form-group" id="mapContainer" style="display:none;">
    <p:gmap id="gmap" center="51.30993291552862,9.448113441467285" zoom="15" type="terrain" style="width:100%;height:700px;" widgetVar="gmap" navigationControl="false" />
</div>

但在div元素之外，地图已构建并正确显示。

我该如何解决这个问题？

Answer 1

正如其中一条评论中所述，如果在页面加载期间隐藏mapContainer div（display: none），则不会初始化Google地图对象...

所以你需要手动＆＃34;在mapContainer div可见后，初始化google map object。

这是完全正常工作的代码（基于您发布的代码），可以满足您的需求：

将此JavaScript添加到您的页面

    <script>
        function resizeElement(elementId,width,height){
            console.log("Resizing element " + elementId + " W/H="+ width + "/" + height);

            var element = document.getElementById(elementId);

            element.style.width=width+"px";
            element.style.height=height+"px"
        }

        function resizePfGmapInsideWrapperElement(wrapperElementId){
            var wrapperElement=document.getElementById(wrapperElementId);
            var width=wrapperElement.clientWidth-40;
            var height=wrapperElement.clientHeight-60;

            resizeElement("gmap",width,height);
        }

        function resizePfGmapInsideDiv(){
            var gmap = PF('gmap').getMap();
            console.log(gmap);

            resizePfGmapInsideWrapperElement("mapContainer");
        }

        function toggleDivVisibility() {
            var div = document.getElementById("mapContainer");
            if(div.style.display === "block"){
                div.style.display = "none";
            }else{
                div.style.display = "block";
                div.style.width="600px";
                div.style.height="400px";
                initializeGmap();
                resizePfGmapInsideDiv();
            }
        }

        function initializeGmap() {
            var myOptions = {
                zoom: 15,
                center: new google.maps.LatLng(51.30993291552862, 9.448113441467285),
                mapTypeId: google.maps.MapTypeId.TERRAIN
            }
            new google.maps.Map(document.getElementById("gmap"),myOptions);
         }

    </script>

并且，仅出于测试目的，添加一个按钮，该按钮将切换mapContainer div visibility

<p:commandButton value="Show/hide map" onclick="toggleDivVisibility();"/>

关键的JS方法是自我解释initializeGmap()，当你使div可见时执行：它将创建＆＃34;给定HTML容器内的新地图，通常是DIV元素。＆＃34; 如上文引用的文档中所述。

PrimeFaces GMap内部div元素不显示

1 个答案: