Question

我试图在我的谷歌地图中使用一些隐藏/显示功能，其中最初显示地图的某个部分，然后点击按钮后整个地图显示出来。一切正常但是当我点击按钮时并尝试查看整个地图，只有一半地图显示，另一半覆盖着一些灰色。这里有代码

  <html>
    <head>
    <style> 

          #thediv {
        height: 100px;
        }
    </style>
    <body>
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
    <script type="text/javascript">

        function initialize() {

                                    var locations = [

                                      ['Nepcreation,sydney branch', -33.867487, 151.20699, 3],
                                      ['Nepcreation,kaulalampur branch', 3.140345, 101.689206, 2],
                                      ['Nepcreation,kathmandu', 27.689390, 85.335494, 1]
                                    ];

                                    var map = new google.maps.Map(document.getElementById('thediv'), {
                                      zoom: 2,
                                      center: new google.maps.LatLng(27.689390, 85.335494),
                                      mapTypeId: google.maps.MapTypeId.ROADMAP
                                    });

                                    var infowindow = new google.maps.InfoWindow();

                                    var marker, i;

                                    for (i = 0; i < locations.length; i++) {  
                                      marker = new google.maps.Marker({
                                        position: new google.maps.LatLng(locations[i][1], locations[i][2]),
                                        map: map
                                      });

                                      google.maps.event.addListener(marker, 'click', (function(marker, i) {
                                        return function() {
                                          infowindow.setContent(locations[i][0]);
                                          infowindow.open(map, marker);
                                        }
                                      })(marker, i));
                                    }
                                    }
                                    google.maps.event.addDomListener(window, 'load', initialize);
</script>

        <div id="thediv" class="reveal-closed"></div>   
                                  <input type="submit" onClick="gmap()">

        <script>
    function gmap(){

        var x=document.getElementById("thediv");

        if(x.style.height=="100px"){
        x.style.height="600px";}
        else{
            x.style.height="100px";
        }


    }
    </script>

        </body>
        </html>

Answer 1

这是许多用户（包括我自己）面临的常见问题。

首先，您已在给定维度(auto x 100px)内初始化了Google地图，并根据它将地图图像（称为图块）加载到其中。

然后根据button的 click ，您正在更改尺寸(auto x 600px)，因此Google图片的多余部分不会呈现但仅显示灰色区域。为了解决这个问题，您需要做的是触发resize事件，如下所述

google.maps.event.trigger(map, "resize");

在您的代码中，map变量的范围是initialize()，而click事件的按钮调用gmap()。因此，请将map变量保留为 global ，然后按照以下代码进行操作：

function gmap() {
    var x = document.getElementById("thediv");
    if (x.style.height == "100px") {
        x.style.height = "600px";
    } else {
        x.style.height = "100px";
    }
    google.maps.event.trigger(map, "resize");
}

_{_{PS：为了向这位新用户提供详细说明，我已将此添加为我的答案，而不是将其标记为重复。}}

谷歌地图只加载其部分的一半，我已经使用了一些额外的JavaScript来为地图上的一些效果，但它只加载了一半

1 个答案: