Question

我正在尝试在div中显示一个google地图，该地图位于最初隐藏的外部div中。当显示切换外部div时，将触发映射的初始化。在初始化函数中，＆＃34; google.maps.event.trigger（gMap，＆＃39; resize＆＃39;）;＆＃34;使用。

我是新注册用户，无法发布任何图片，所以这里有小提琴：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的宽度和高度都设置为500px（在小提琴中我将其设置为200px）。首先，它应该是一个正方形。但现在它是一个矩形。更改css只会改变高度，但宽度始终显示相同。

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

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

所以我想知道是否有任何身体可以帮助我让它发挥作用。

谢谢！

Answer 1

它认为css

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

它适用于某些地图元素，您可以使用

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

或将一个类放到要更改的div

谷歌地图不正确的UI显示，也是地图偏移了一些偏移量

1 个答案: