谷歌地图显示：没问题答案

【问题标题】：Google Maps Display:None Problem谷歌地图显示：没问题
【发布时间】：2011-01-15 16:05:52
【问题描述】：

我正在尝试设置一个 Google 地图，当点击一个链接时会显示它，然后在点击另一个链接时隐藏它。一切正常，除了当我从 display:none 显示地图时，它无法正常显示。

我读到了关于使用 google.maps.event.trigger(map, 'resize');但我对 Javascript 和 JQuery 不够精通，不知道如何添加它。

这是我一直在使用的代码：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 TRANSITIONAL//EN">
<html>
    <head>
        <title></title>
        <style type="text/css">
            #viewmap {
                position:relative;
                width:944px;
                float:left;
                display:none;
            }
            #hidemap {
                position:relative;
                width:944px;
                float:left;
                display:block;
            }
            #map_canvas {
                position:relative;
                float:left;
                width:944px;
                height:300px;
            }
        </style>
        <script type="text/javascript"
            src="http://maps.google.com/maps/api/js?v=3.2&sensor=false">
        </script>
        <script type="text/javascript">
            function initialize() {
                var latlng = new google.maps.LatLng(-27.999673,153.42855);
                var myOptions = {
                    zoom: 15,
                    center: latlng,
                    mapTypeId: google.maps.MapTypeId.ROADMAP,
                    mapTypeControl: true,
                    mapTypeControlOptions: {
                        style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
                    }
                };

                var map = new google.maps.Map(document.getElementById("map_canvas"),myOptions);

                var contentString = 'blah';

                var infowindow = new google.maps.InfoWindow({
                    content: contentString
                });

                var marker = new google.maps.Marker({
                    position: latlng, 
                    map: map
                });

                google.maps.event.addListener(marker, 'click', function() {
                    infowindow.open(map,marker);
                });
            }

            google.maps.event.addDomListener(window, 'load', initialize);
        </script>
        <script type="text/javascript">
            function toggleDiv1(viewmap){
                if(document.getElementById(viewmap).style.display == 'block'){
                    document.getElementById(viewmap).style.display = 'none';
                }else{
                    document.getElementById(viewmap).style.display = 'block';
                }
            }
            function toggleDiv2(hidemap){
                if(document.getElementById(hidemap).style.display == 'none'){
                    document.getElementById(hidemap).style.display = 'block';
                }else{
                    document.getElementById(hidemap).style.display = 'none';
                }
            }
        </script>
    </head>
    <body>
        <div id="viewmap">
            <a href="#" onmousedown="toggleDiv1('viewmap'); toggleDiv2('hidemap');">Hide map</a>
            <div id="map_canvas"></div>
        </div>
        <div id="hidemap">
            <a href="#" onmousedown="toggleDiv1('viewmap'); toggleDiv2('hidemap');">View map</a>
        </div>
    </body>
</html>

任何帮助将不胜感激，

昆汀

【问题讨论】：

标签： javascript jquery google-maps

【解决方案1】：

我今天也遇到了同样的问题，最终在官方Google Maps Javascript API V3 Reference找到了这个：

当 div 改变时，开发者应该在地图上触发这个事件尺寸：google.maps.event.trigger(map, 'resize').

由于display:none 相当于将<div> 的大小保留为0，因此将其更改为display:block 实际上会改变大小，因此需要触发地图调整大小事件。

对我来说就像一个魅力。

2018 年 5 月 22 日更新

随着 Maps JavaScript API 3.32 版中的新渲染器版本的发布，调整大小事件不再是 Map 类的一部分。

文档说明

调整地图大小时，地图中心固定

全屏控件现在保留居中。

不再需要手动触发调整大小事件。

来源：https://developers.google.com/maps/documentation/javascript/new-renderer

google.maps.event.trigger(map, "resize"); 从版本 3.32 开始没有任何效果

【讨论】：

这就是我们所需要的。没有恶作剧，只有一个简单的事件触发器。
对于来自 Angular js 的人来说，这可以解决问题google.maps.event.trigger($scope.map.control.getGMap(), 'resize');
这让我很开心，圣诞快乐！顺便说一句，这是 Google 参考的正确链接：developers.google.com/maps/documentation/javascript/…
非常好。如果您使用的是包装库，那么您将需要找到一个等效的解决方案。就我而言，我在VueStrap Tabs 中使用VueGoogleMaps。我用<tabs nav-style="tabs" @active="tabActive"> 和一个事件监听器tabActive(index) { this.$gmapDefaultResizeBus.$emit('resize') } 修复了这个问题

【解决方案2】：

jquery 选项卡也会出现此问题，您可以尝试以这种方式隐藏地图，而不是应用“display:none”：

当您尝试隐藏地图时添加以下样式，而不是使用 display:none

position: absolute;
left: -100%;

您还可以添加过渡，例如：transition: left 1s ease;

您可以尝试在显示地图后使用 google 事件监听器触发它：

<script type="text/javascript">
    var map; //I placed here the map variable so other functions can see it.
    var latlng = new google.maps.LatLng(-27.999673,153.42855); 
    // in order to center again the map...
    function initialize() {

        var myOptions = {
            zoom: 15,
            center: latlng,
            mapTypeId: google.maps.MapTypeId.ROADMAP,
            mapTypeControl: true,
            mapTypeControlOptions: {
                style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
            }
        };

        map = new google.maps.Map(document.getElementById("map_canvas"),myOptions);

        var contentString = 'blah';

        var infowindow = new google.maps.InfoWindow({
            content: contentString
        });

        var marker = new google.maps.Marker({
            position: latlng, 
            map: map
        });

        google.maps.event.addListener(marker, 'click', function() {
            infowindow.open(map,marker);
        });
    }

    google.maps.event.addDomListener(window, 'load', initialize);
</script>
<script type="text/javascript">
    function toggleDiv1(viewmap){
        if(document.getElementById(viewmap).style.display == 'block'){
            document.getElementById(viewmap).style.display = 'none';
        }else{
            document.getElementById(viewmap).style.display = 'block';
            //here is where your map is being displayed again, try here
            // to trigger the resize event.
            google.maps.event.trigger(map, 'resize');
            map.setCenter(latlng);
        }
    }
    function toggleDiv2(hidemap){
        if(document.getElementById(hidemap).style.display == 'none'){
            document.getElementById(hidemap).style.display = 'block';
        }else{
            document.getElementById(hidemap).style.display = 'none';
        }
    }
</script>

【讨论】：

嗨哈维尔，有什么方法可以不使用绝对定位吗？你知道如何实现 google.maps.event.trigger(map, 'resize');进入我的代码？
嗨，我对你的 javascript 做了一些小改动，对我来说效果很好，我把 map 变量放在函数之外，这样它就可以用于其他函数（在你的情况下是 toggleDiv1 函数），然后当您的地图 div 再次显示时，您可以触发调整地图大小事件。我建议你用 jQuery 来做这些事情，这样你就可以避免编写额外的代码。
这似乎适用于地图的显示，但由于某种原因它没有居中。如果您向左滚动，则会出现一个红色气球，它应该居中。如果从一开始就使地图可见，它就可以正常工作。但是当 div 没有阻止时会发生一些事情，并且它不会保持居中。你知道为什么会这样吗？
我不知道为什么会发生这种情况，但是您可以在使用 map.setCenter( latlng ) 触发调整大小事件后再次将地图居中。在您的代码中，您需要将 var latlng 放在函数之外。顺便说一句，对不起我的英语不好。
sshhh todo un pro el señor toledo jajajaja

【解决方案3】：

地图大小的问题在于它需要知道要渲染到的 div 的大小。目前，当您的 div 隐藏时，您正在初始化文档加载地图，因此地图无法正确计算其大小 - 要解决此问题，您只需在第一次显示 div 时初始化它（而不是 onload）。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 TRANSITIONAL//EN">
<html>
    <head>
        <title></title>
        <style type="text/css">
            #viewmap {
                position:relative;
                width:944px;
                float:left;
                display:none;
            }
            #hidemap {
                position:relative;
                width:944px;
                float:left;
                display:block;
            }
            #map_canvas {
                position:relative;
                float:left;
                width:944px;
                height:300px;
            }
        </style>
        <script type="text/javascript"
            src="http://maps.google.com/maps/api/js?v=3.2&sensor=false">
        </script>
        <script type="text/javascript">
        //your global map object
        var map = null;
            function initialize() {
                var latlng = new google.maps.LatLng(-27.999673,153.42855);
                var myOptions = {
                    zoom: 15,
                    center: latlng,
                    mapTypeId: google.maps.MapTypeId.ROADMAP,
                    mapTypeControl: true,
                    mapTypeControlOptions: {
                        style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
                    }
                };

                map = new google.maps.Map(document.getElementById("map_canvas"),myOptions);

                var contentString = 'blah';

                var infowindow = new google.maps.InfoWindow({
                    content: contentString
                });

                var marker = new google.maps.Marker({
                    position: latlng, 
                    map: map
                });

                google.maps.event.addListener(marker, 'click', function() {
                    infowindow.open(map,marker);
                });

            }


            function toggleDiv1(viewmap){
                if(document.getElementById(viewmap).style.display == 'block'){
                    document.getElementById(viewmap).style.display = 'none';
                }else{
                    document.getElementById(viewmap).style.display = 'block';
                    //check if map object exists (it is created by you initialize function), if not initialize it
                    if (!map) {
                    initialize();

                    }
                }
            }
            function toggleDiv2(hidemap){
                if(document.getElementById(hidemap).style.display == 'none'){
                    document.getElementById(hidemap).style.display = 'block';
                }else{
                    document.getElementById(hidemap).style.display = 'none';
                }
            }
        </script>
    </head>
    <body>
        <div id="viewmap">
            <a href="#" onmousedown="toggleDiv1('viewmap'); toggleDiv2('hidemap');">Hide map</a>
            <div id="map_canvas"></div>
        </div>
        <div id="hidemap">
            <a href="#" onmousedown="toggleDiv1('viewmap'); toggleDiv2('hidemap');">View map</a>
        </div>
    </body>
</html>

【讨论】：

啊，好吧，你说得有道理。感谢您的回答。
哈哈太棒了，谢谢。不知道为什么您的答案不被接受。

【解决方案4】：

当你想显示地图时，只需初始化它。我遇到了同样的问题，就这样解决了。

删除这一行：

google.maps.event.addDomListener(window, 'load', initialize);

并以这种方式更改toggleDiv 脚本：

function toggleDiv1(viewmap){  
  if(document.getElementById(viewmap).style.display == 'block'){  
      document.getElementById(viewmap).style.display = 'none';  
   }else{  
      document.getElementById(viewmap).style.display = 'block';  
      initialize();  
   }  
}  
function toggleDiv2(hidemap){  
   if(document.getElementById(hidemap).style.display == 'none'){  
       document.getElementById(hidemap).style.display = 'block';  
   }else{  
       document.getElementById(hidemap).style.display = 'none';  
   }  
}

【讨论】：

最佳方法。仅在显示地图时加载。

【解决方案5】：

.map_container {display:none;}

$('.show_hide').click(function(){
    $('.map_container').toggle({
        complete:function (){
            google.maps.event.trigger(map, 'resize');
        },
        duration:'slow'
    });
})

【讨论】：

【解决方案6】：

您确实更好地使用off-left 技术！
这是我的编辑：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 TRANSITIONAL//EN">
<html>
    <head>
        <title></title>
        <style type="text/css">
            #viewmap {
                position:relative;
                width:944px;
                float:left;
            }
            #hidemap {
                position:relative;
                width:944px;
                float:left;
            }
            #map_canvas {
                position:relative;
                float:left;
                width:944px;
                height:300px;
            }
          .good-bye {
            position: absolute !important;
            left: -10000px !important;
          }
        </style>
        <script type="text/javascript"
            src="http://maps.google.com/maps/api/js?v=3.2&sensor=false">
        </script>
        <script type="text/javascript">
            function initialize() {
                var latlng = new google.maps.LatLng(-27.999673,153.42855);
                var myOptions = {
                    zoom: 15,
                    center: latlng,
                    mapTypeId: google.maps.MapTypeId.ROADMAP,
                    mapTypeControl: true,
                    mapTypeControlOptions: {
                        style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
                    }
                };

                var map = new google.maps.Map(document.getElementById("map_canvas"),myOptions);

                var contentString = 'blah';

                var infowindow = new google.maps.InfoWindow({
                    content: contentString
                });

                var marker = new google.maps.Marker({
                    position: latlng,
                    map: map
                });

                google.maps.event.addListener(marker, 'click', function() {
                    infowindow.open(map,marker);
                });
            }

            google.maps.event.addDomListener(window, 'load', initialize);
        </script>
        <script type="text/javascript">
            function toggleDiv1(viewmap){
              if(hasClass(document.getElementById(viewmap), 'good-bye'))
                removeClass(document.getElementById(viewmap), 'good-bye');
              else
                addClass(document.getElementById(viewmap), 'good-bye');
              return;
            }
            function toggleDiv2(hidemap){
              if(hasClass(document.getElementById(hidemap), 'good-bye'))
                removeClass(document.getElementById(hidemap), 'good-bye');
              else
                addClass(document.getElementById(hidemap), 'good-bye');
              return;
            }

            // http://snipplr.com/view/3561/addclass-removeclass-hasclass/
            function hasClass(ele,cls) {
              return ele.className.match(new RegExp('(\\s|^)'+cls+'(\\s|$)'));
            }

            function addClass(ele,cls) {
              if (!this.hasClass(ele,cls)) ele.className += " "+cls;
            }

            function removeClass(ele,cls) {
              if (hasClass(ele,cls)) {
                var reg = new RegExp('(\\s|^)'+cls+'(\\s|$)');
                ele.className=ele.className.replace(reg,' ');
              }
            }
        </script>
    </head>
    <body>
        <div id="viewmap" class="good-bye">
            <a href="#" onmousedown="toggleDiv1('viewmap'); toggleDiv2('hidemap'); return false;">Hide map</a>
            <div id="map_canvas"></div>
        </div>
        <div id="hidemap">
            <a href="#" onmousedown="toggleDiv1('viewmap'); toggleDiv2('hidemap');">View map</a>
        </div>
    </body>
</html>

Example Link.

【讨论】：

感谢您提供另一个解决方案，我会尝试这两种方法，看看哪种方法最适合我正在尝试做的事情

【解决方案7】：

很简单...当你初始化地图时，它的所有外部 div 都必须已经显示出来了。

所以只需在最后初始化地图：

setTimeout(function(){
    $mapsOuterDiv.slideToggle(700);
    setTimeout(function(){
        initializeGoogleMap();
    },300);
},300);

【讨论】：

【解决方案8】：

我也找到了另一种解决方案。有时你需要在谷歌地图对象上调用refresh()，地图将被强制调整大小。

// gmaps - instance of particular map ...
gmaps.refresh()

【讨论】：

【解决方案9】：

document.getElementById('map_canvas').style.display = 'none';

这对我来说很好用 - 不知道是不是因为我隐藏了画布而不是包含 div....在 IE、Firefox 和 Chrome 中运行良好。当然，一旦地图画布被隐藏，您就可以隐藏您的容器。

【讨论】：

【解决方案10】：

我一直在尝试为我的地图制作动画，但没有成功，最后想出了这个：

CSS： 我们使用position:absolute; 和visibility:hidden; 设置地图包装器，因为它必须具有正常尺寸才能正确渲染。

JavaScript：

$(document).ready(function() 
{
    // We then run this function only once per page load. It places out map back in the document flow but hides it before it starts to toggle its height.
    $("#mapBtn").one("click", function() 
    {
        $("#myMap").hide(); 
        $("#myMap").css("visibility", "inherit");
        $("#myMap").css("position", "relative");
    });

    // And now we toggle away nicely
    $("#mapBtn").click(function() 
    {
        $("#myMap").slideToggle(400);
    });
});

【讨论】：

【解决方案11】：

通常 google.maps.event.trigger(map, 'resize') 会刷新地图并因此在每次显示后附加代码，因为之前的显示状态是“none” ：

    document.getElementById(hidemap).style.display = 'block'; 
    Generally google.maps.event.trigger(map, 'resize')

【讨论】：

【解决方案12】：

文档中有一个例子：https://developers.google.com/maps/documentation/javascript/examples/control-replacement

如果您不希望控件位于地图区域中，只需注释掉以下行：

map.controls[google.maps.ControlPosition.RIGHT_TOP].push(fullscreenControl);

【讨论】：

【解决方案13】：

这段代码可以正常工作（使用 jQuery 1.2.6）： CSS：#gog-map{position:absolute; visibility:hidden;}

$(document).ready(function() {
  $('a#link').click(function() {
    if ($('#gog-map').is(':visible')){
      $('#gog-map').slideUp('slow');            
    } else{
      $('#gog-map').slideDown('slow');
      $("#gog-map").css('visibility','inherit');
      $("#gog-map").css('position','relative');
    }
     return false;
  });
});

【讨论】：