3

我正在尝试将 Google 地图放置在 Boostrap 布局中，在传统网页上使用固定宽度，并在移动设备上查看时使用响应式布局。

我已经阅读了 Google 地图如何对 Bootstrap 布局和可用修复造成问题。我使用了这段代码，它在几个网站上被列为修复：

#map_canvas label { width: auto; display:inline; }
#map_canvas img { max-width: none; max-height: none; }

这适用于固定布局，但在移动设备上查看时不提供任何响应。

在使用 Bootstrap 时有什么方法可以实现这两个目标？非常感谢分享的任何见解或经验。

4

4 回答 4

5

你不max-width想像@matt 建议的那样，但他在正确的轨道上。流体列设置相对大小。Google 已经在框架中设置了大小，您希望将其覆盖为您的网格允许的最大大小；你想要经常width的。

iframe, object, embed { width: 100%; }

我建议把它放在一个div被调用的#gmap地方并且更合理，

#gmap iframe, #gmap object, #gmap embed { width: 100%; }
于 2013-03-06T20:00:00.140 回答
2

用它。这个对我有用。希望它也能解决你的问题

    <iframe width="100%" height="350" frameborder="0" scrolling="no" marginheigh
    t="0" marginwidth="0" src="https://maps.google.co.uk/maps?f=q&amp;source=s_q
    &amp;hl=en&amp;geocode=&amp;q=Littlehampton,+UK&amp;aq=0&amp;oq=little&amp;s
    ll=53.800651,-4.064941&amp;sspn=20.121063,44.384766&amp;ie=UTF8&amp;hq=&amp;
    hnear=Littlehampton,+West+Sussex,+United+Kingdom&amp;t=m&amp;ll=50.811033,-0
    .538673&amp;spn=0.018982,0.036478&amp;z=14&amp;iwloc=A&amp;output=embed">
    </iframe>
于 2013-10-21T08:28:37.363 回答
0

实际上，如果您只是使用嵌入的谷歌地图 IFRAME，您只需将其添加到您的 CSS 即可使其具有响应性（假设您不使用任何其他 iframe：

iframe, object, embed{max-width: 100%;}

如果您的容器/主题是响应式的，这将非常有用。

于 2013-01-10T20:55:38.770 回答
0

http://ansciath.tumblr.com/post/7347495869/css-aspect-ratio中描述的技术效果很好。

只需将此处给出的示例中的“某些文本”替换为 Google 地图代码即可。

于 2012-06-28T12:42:24.537 回答