javascript - 谷歌地图不正确的 UI 显示， map 也有一些偏移

Question

我试图在一个 div 中显示一个谷歌地图，它位于一个最初隐藏的外部 div 中。当切换显示外部 div 时，将触发 map 的初始化。在初始化函数中，“google.maps.event.trigger(gMap, 'resize');”被使用。

我是新注册用户，不能发布任何图片，所以这是 fiddle :http://jsfiddle.net/Pd72p/

HTML:

<div id="main">
    <div id="opt">
        <div class="bar">
            &#x25bc Info1
        </div>
        <div class="description">
            <p>Info1</p>
            <div class="bttn">Learn more</div>
        </div>
        <div class="bar">
            &#x25bc Info2
        </div>
        <div class="description">
            <p>Info2</p>
            <div id="map"></div>
            <div class="bttn">Learn more</div>
        </div>
    </div>
</div>

CSS:

.hidden{
display:none;
}

#opt{
margin:0;
padding:0;
/*width:80%;*/
}
#opt div{
margin:2%;
padding:1%;
width:96%;
}
#opt .bar{
background-color:#ffc933;
}
#opt .bar:hover, #opt .description .bttn:hover{
background-color:#55ee55;
cursor:pointer;
}
#opt .description{
border-top:dotted;
border-bottom:dotted;
}

#opt .description .bttn{
margin:20px 0px 0px 0px;
padding:10px;
width:100px;
background-color:#ffa822;
text-align:center;
border-radius:5px;
}

#map{
width:200px;
height:200px;
}

JS:

"use strict";

$(function(){
    $('#opt .description').addClass('hidden');
    $('#opt .bar').click(function(){
        $(this).next().slideToggle();
        if ($('#map').is(':visible'))
        {
            initializeMap();
        }
    });
});


function initializeMap() {

    // default location
    var initialLatLng = new google.maps.LatLng(33.4500, -112.0667);

    var mapOptions = {
        center: initialLatLng,
        zoom: 13,
        //disableDefaultUI: true,
        mapTypeId: google.maps.MapTypeId.SATELLITE
    };
    var gMap = new google.maps.Map(document.getElementById("map"), mapOptions);

    var gMarker = new google.maps.Marker({
        position: initialLatLng,
        map: gMap});

    google.maps.event.trigger(gMap, 'resize');
}
//google.maps.event.addDomListener(window, 'load', initializeMap);

直接包含 map 的 div 将宽度和高度都设置为 500px(在 fiddle 中我将其设置为 200px)。所以首先，它应该是一个正方形。但现在它是一个矩形。更改 css 只会更改高度，但宽度始终显示相同。

其次，左上角向右和底部偏移了一些正偏移。

第三，UI控件显示不正确。它们一团糟，当我尝试拖动 map 时也会导致问题。如果我使用 disableDefaultUI:true，拖动问题就会消失。

所以我想看看是否有人可以帮助我让它工作。

谢谢!

Answer 1

它认为 css

#opt div{
  margin:2%;
  padding:1%;
  width:96%;
}

它适用于一些 map 元素，你可以使用

#opt > div{
  margin:2%;
  padding:1%;
  width:96%;
}

或者把一个类放到你想改变的div上