-1

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

里面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元素之外，地图已构建并正确显示。

我怎么解决这个问题？

4

1 回答 1

0

mapContainer如评论之一所述，如果divdisplay: none在页面加载期间隐藏（），则不会初始化谷歌地图对象......

因此，在使div 可见后，您将需要“手动”初始化谷歌地图对象。mapContainer

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

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

并且，仅出于测试目的，添加一个按钮来切换mapContainerdiv 可见性

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

关键的 JS 方法在您使 div 可见的那一刻执行是不言自明initializeGmap()的：它将“在给定的 HTML 容器内创建一个新地图，该容器通常是一个 DIV 元素”。如上面引用的文档中所述。

于 2017-11-17T13:28:46.600 回答