谷歌地图UI显示不正确，地图也有一些偏移答案

【问题标题】：google map incorrect UI display, also the map is displaced of some offset谷歌地图UI显示不正确，地图也有一些偏移
【发布时间】：2014-07-06 20:25:35
【问题描述】：

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

我是新注册用户，不能发布任何图片，所以这里是小提琴：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);

直接包含地图的 div 的宽度和高度都设置为 500 像素（在小提琴中我将其设置为 200 像素）。所以首先，它应该是一个正方形。但现在它是一个矩形。更改 css 只会更改高度，但宽度始终显示相同。

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

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

所以我想看看是否有任何机构可以帮助我让它发挥作用。

谢谢！

【问题讨论】：

虽然您不能发布图片，但您绝对可以发布代码，并通过您的相关尝试链接到jsfiddle.net
@FélixGagnon-Grenier 刚刚更新

标签： javascript jquery css google-maps

【解决方案1】：

它认为 css

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

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

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

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

【讨论】：