Question

在我的应用程序中，我需要默认隐藏谷歌地图，当用户点击它将显示的显示按钮时。我的问题是当点击按钮时，地图在整个帧中都没有正确渲染。

 <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
   }

我该如何解决这个问题？

Answer 1

隐藏地图画布

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

显示地图画布

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

你可以使用JQuery - show（），hide（）和toggle（）来做同样的事情。

默认情况下隐藏html标签时，Google地图不会在整个框架中呈现

1 个答案: