Question

我正在尝试设置一个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>

非常感谢任何帮助，

金廷

Answer 1

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

当div更改时，开发人员应在地图上触发此事件大小：google.maps.event.trigger(map, 'resize')。

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

对我来说就像一个魅力。

更新2018-05-22

使用Maps JavaScript API版本3.32中的新渲染器版本，resize事件不再是Map类的一部分。

文档说明

调整地图大小后，地图中心将固定



全屏控制现在保留了中心。



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

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

从版本3.32开始，

google.maps.event.trigger(map, "resize");没有任何影响

Answer 2

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

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

position: absolute;
left: -100%;

您还可以添加以下转换：transition：left 1s ease;

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

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

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

Answer 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';  
   }  
}

Answer 5

.map_container {display：none;}

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

Answer 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

Answer 7

非常简单......当您初始化地图时，必须已经显示了所有外部div。

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

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

Answer 8

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

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

Answer 9

我一直在尝试动画我的地图而没有运气，最后提出了这个：

<强> 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);
    });
});

Answer 10

此代码正常工作（使用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;
  });
});

$(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; }); });

Answer 11

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

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

Answer 12

一般来说google.maps.event.trigger（地图，＆＃39;调整大小＆＃39;）将刷新地图，因此无论何时显示，都会附加代码，因为之前的状态是显示是＆＃34;无＆＃34;：

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

Answer 13

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

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

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

Google地图显示：无问题

13 个答案: