javascript - 谷歌地图不尊重 DIV CSS 样式

Question

所以我有一个名为 dgmap 的 div，我将我的谷歌地图放置在其中。我遇到的问题是，当我显示地图时，它超出了我在 CSS 中指定的大小。仅供参考，我的目标是设备宽度为 480 像素的 HTC evo。所以宽度应该是44px。?? 有任何想法吗 ？

#dgmap {
float:none;
width: 98%;
height: 300px;
}
@media only screen and (max-width: 480px) 
{
#dgmap{
float: none;
width: 44px;
height: 250px;      

}
}

Answer 1

您是否尝试过将!important标签包含在宽度中，如下所示：

width: 44px !important;

Answer 2

谷歌地图提供了一个带有 iframe 的代码，例如：

<iframe width="250" height="250" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://maps.google.com/maps?f=q&amp;source=s_q&amp;hl=en&amp;geocode=FRCUIAIduoZTCCnnVy7whxtdYDGJG1cii2EBLg%3BFYBHIQIdCrpTCCkfVrpup5IYYDF4sncnN-BKPQ&amp;q=tokyo+to+toshima+ku+ikebukuro+3-30-15.&amp;aq=&amp;sll=37.0625,-95.677068&amp;sspn=34.122306,86.572266&amp;ie=UTF8&amp;t=m&amp;start=0&amp;ll=35.724496,139.70541&amp;spn=0.041808,0.051498&amp;z=13&amp;output=embed"></iframe><br /><small><a href="https://maps.google.com/maps?f=q&amp;source=embed&amp;hl=en&amp;geocode=FRCUIAIduoZTCCnnVy7whxtdYDGJG1cii2EBLg%3BFYBHIQIdCrpTCCkfVrpup5IYYDF4sncnN-BKPQ&amp;q=tokyo+to+toshima+ku+ikebukuro+3-30-15.&amp;aq=&amp;sll=37.0625,-95.677068&amp;sspn=34.122306,86.572266&amp;ie=UTF8&amp;t=m&amp;start=0&amp;ll=35.724496,139.70541&amp;spn=0.041808,0.051498&amp;z=13" style="color:#015492;text-align:left; font-size:10px; font-weight:bold; float:right;">VIEW LARGER MAP</a></small>

您必须在 iframe 中指定地图的大小。

Answer 3

隐藏 div 直到需要然后显示它调用 google.maps.event.trigger(map, 'resize')

希望这可以帮助！