Question

我正在使用显示/隐藏功能来显示Gmaps谷歌地图插件，但是当执行onclick时，会显示Gmap，但地图的一部分缺失并且显示为灰色。

我已经在网上查看了各种网站的解决方案，但只找到了使用“gmap.checkResize（）”的选项，但不确定如何在我的代码中使用它，如果它甚至可以用于我的问题...

我已经添加了下面的代码，我正在寻找帮助，让你可以在点击时显示整个地图。

    <script src="http://maps.google.com/maps?file=api&amp;v=2&amp;sensor=true&amp;key=ABQIAAAAL7_5Aste4KkbgvT91y3k9xQo4D0inr193z9lVfCY1TNJb6Lz5RQJyM7R-PR3bMS1i_GvwioUrJMaXw" type="text/javascript"></script>
    <script type="text/javascript" src="javascripts/jquery-1.7.min.js"></script>
    <script type="text/javascript" src="javascripts/jquery.gmap-1.1.0-min.js"></script>

    </head>
    <style>
    #map{
                    position:relative;
                    float:left;
                    width:450px;
                    height:400px;
    }


    .PlaceHeading{
        color: #C6688D;
        font-family: Arial;
        font-size: 15px;
        margin-bottom:-13px;
    }

    #content{
        text-align:center;
    }

    a{
        color: #C6688D;
    }

    .PlaceAddress{
        color: #666666;
        font-family: Arial,Georgia,sans-serif;
        font-size: 12px;
        font-weight: normal;
    }



    </style>


<script type="text/javascript">

    $(function() {
    $("#map").gMap({ markers: [{ address: "809 1st Ave. N.E. Calgary, Alberta",
                                 html:'<div id="content"><center>'+
                                    '<h1 class="PlaceHeading">Blue Star Diner</h1>'+  //*Title of location
                                    '<p class="PlaceAddress">809 1st Ave. N.E.<br />'+ //*Street address of location
                                    'Calgary, AB <br />'+ //*City and Province of location
                                    '403-261-9998 <br/>'+ //*Phone number of location
                                    '<a href="http://maps.google.com/maps?saddr=809 1st Ave. N.E.+Calgary,AB+Canada" target="_blank">'      //*Enter Address info in url where appropriate to link to Google directions page
                                    +'Get directions</a> <b>|</b> <a href="http://www.bluestardiner.ca/" target="_blank">' + //*Enter place url here
                                     'Visit website </a> </p></center>' +
                                     '</div>',
                                      icon: { image: "mapPage/images/marker1.png",
                                      iconsize: [25, 41],
                                      iconanchor: [9, 34],
                                      infowindowanchor: [9, 2] }
                               }],
                               zoom: 13 });
    });
    </script>
    <script language="JavaScript">
    function ShowHide(divId)
    {
    if(document.getElementById(divId).style.display == 'none')
    {
    document.getElementById(divId).style.display='block';
    document.getElementById("expandMap").src="mapPage/images/minus.jpg";
    document.getElementById("mapText").innerHTML="Hide map";
    }
    else
    {
    document.getElementById(divId).style.display = 'none';
    document.getElementById("expandMap").src="mapPage/images/plus.jpg";
    document.getElementById("mapText").innerHTML="View map";
    }
    }
    </script>





    <body>

    <a onclick ="javascript:ShowHide('HiddenDiv')" href="javascript:;" ><img src="/mapPage/images/plus.jpg" id="expandMap"alt="" style="float:left;" /><p id="mapText">View map</p></a>

    <div class="mid" id="HiddenDiv" style="DISPLAY: none" >
    <div id="map">&nbsp;</div>
    </div>

Answer 1

display: none;表示该元素在页面上不占用空间，这似乎导致GMap大小计算无法正常工作。使用visibility: hidden;代替是解决问题的一种方法。如果占用空间的元素是一个问题，position: absolute;可能会帮助你。

显示/隐藏Gmap在显示时显示部分灰色

1 个答案: