默认情况下，当html标签隐藏时，谷歌地图不会渲染整个帧

Google Map doesn't render in whole frame when html tag hidden by default

本文关键字：情况下 html 标签 默认 隐藏 谷歌地图      更新时间：2023-09-26

在我的应用程序中，我需要使默认情况下不可见的谷歌地图，当用户单击显示按钮时，它将显示。我的问题是，当点击按钮时，地图不能在整个帧中正确渲染。

 <div id="map-canvas" style="display: none"></div>

这是javascript函数

 function show(){
                if(document.getElementById("showMap").value == "Show Map"){
                    document.getElementById("showMap").value = "Hide Map";
                    document.getElementById("map-canvas").style.display = '';
                }
                else{
                    document.getElementById("showMap").value = "Show Map";
                    document.getElementById("map-canvas").style.display = 'none';
                }
            }

这是我的谷歌地图加载功能。

 function initialize() {
            var mapOptions = {
                zoom: 8,
                center: new google.maps.LatLng(7.7, 80.7)
            };
            map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
        }
        google.maps.event.addDomListener(window, 'load', initialize);

也使用一些CSS。

  #map-canvas {
      height: 100%;
      width: 80%;
      margin: 0px;
      padding: 0px
   }

如何解决这个问题?

隐藏地图画布

document.getElementById("map-canvas").style.visibility = "hidden";

显示地图画布

document.getElementById("map-canvas").style.visibility = "visible";

你可以使用JQuery - show()， hide()和toggle()来做同样的事情

相关文章：