带有 Bootstrap 的谷歌地图没有响应

Posted 2023-02-23

【中文标题】带有 Bootstrap 的谷歌地图没有响应

【英文标题】：Google Maps with Bootstrap not responsive

【发布时间】：2013-03-18 02:51:34

【问题描述】：

我正在使用引导程序并嵌入了 Google Maps API 3。

#map_canvas 没有响应；这是一个固定的宽度。

另外，如果我使用 height: auto 和 width: auto，地图不会显示在页面中。

为什么？

<style type="text/css">
  body 
    padding-top: 60px;
    padding-bottom: 40px;
  
#map_canvas 
   height: 400px;
    width: auto;
  
</style>

<div class="container">
 <div class="row">
  <div class="span6">
   <div id="map_canvas"></div>
  </div>
 </div>
</div>

【参考方案1】：

对于那些使用 javascript api（不是 iframe）嵌入的人：

<div class="googleMapContainer">
  <div id="map"></div>
</div>

.googleMapContainer 
    position: relative;
    &:after 
      content: "";
      display: block;
      padding-bottom: 100%;
    


#map 
  position: absolute;
  height: 100%;
  width: 100%;
  right: 0;
  overflow: hidden;

【参考方案2】：

09 2021

问这个问题已经 8 年了。 如果你们中的任何人仍在寻找解决方案但找不到它，这里就是。

Boostrap 5（经过测试和工作）

将width="100%" 添加到谷歌地图iframe

<div class="row">
    <div class="col-6">
        <iframe src="SOURCE"  OTHER_ATTRIBUTES></iframe>
    </div>
</div>

【讨论】：

亲切！ bootstrap 5 这么简单

【参考方案3】：

This blog post 有一个很好的解决方案。

在嵌入代码周围添加一个 div 标签。使用 CSS 类 map-responsive 这样您的代码现在看起来像这样：

<div class="map-responsive">
    <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d386950.6511603643!2d-73.70231446529533!3d40.738882125234106!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x89c24fa5d33f083b%3A0xc80b8f06e177fe62!2sNueva+York!5e0!3m2!1ses-419!2sus!4v1445032011908"   frameborder="0" style="border:0" allowfullscreen></iframe>
</div>

现在在您的一个样式表文件中添加一些 CSS 属性：

.map-responsive
    overflow:hidden;
    padding-bottom:56.25%;
    position:relative;
    height:0;

.map-responsive iframe
    left:0;
    top:0;
    height:100%;
    width:100%;
    position:absolute;

【参考方案4】：

使地图在高度和宽度上都调整大小：

http://niklausgerber.com/blog/responsive-google-or-bing-maps/

2018 年 9 月 27 日更新：据报道链接已关闭，不确定多少，所以我将我的网络存档搜索链接到他的 github：

https://github.com/niklausgerber/responsive-google-or-bing-maps

【讨论】：

一些代码应该在答案中，以防链接断开

网络档案是我们的朋友 :)

【参考方案5】：

已修订：官方帖子已过时，因此我更新了答案并改进了代码。

以下方法不需要引导程序或任何其他框架。它可以独立使用以使任何内容响应。通过计算aspect ratio 对父元素应用填充。然后使用绝对位置将子元素放置在顶部。

HTML：

<div class="iframe-container">
    <!-- embed code here -->
</div>

CSS：

.iframe-container
    position: relative;
    width: 100%;
    padding-bottom: 56.25%; /* Ratio 16:9 ( 100%/16*9 = 56.25% ) */

.iframe-container > *
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: 0;
    padding: 0;
    height: 100%;
    width: 100%;

---

下面的“小提琴”有如何制作的例子：

响应式 Google 地图

响应式 OpenStreetMap

响应式 Vimeo 视频

响应式 Youtube 视频

演示：http://jsfiddle.net/LHQQZ/135/

【讨论】：

第一种方法有效，但是当我将高度更改为 100% 时不显示，您能告诉我为什么吗？

方法 3 对我来说效果很好。我正在使用 Bootstrap 3 和 gmaps4rails 1.x。

在 php 和 html 上为我工作。谢谢。

没有必要使用 iframe 任何状态，在我的例子中，我使用这个类和 div 并且一切正常！谢谢你

【参考方案6】：

<div class="map_container">
    <div id="map" class="gmaps4rails_map">
        <div id="map_canvas" class="span9">
            <%= gmaps("map_options" =>  "type" => "ROADMAP", "center_longitude" => 180,"auto_zoom" => false, "zoom" => 16, "auto_adjust" => true, "markers" =>  "data" => @json )%>
        </div>
    </div> 

【讨论】：

纯代码的答案永远都不好，尤其是格式不好的答案。

【参考方案7】：

非常简单。使用 CSS 使地图相对于视口高度：

.map 
  height: 80vh;

这指定 .map 容器必须是视口高度的 80%。

【讨论】：

这对我来说似乎是解决办法。我尝试了所有其他响应，但没有任何效果。特别是因为我在row 中有我的col-md-xx

这就像在 bootstrap 4 和 rails 5.2 中的魅力。谢谢！

【参考方案8】：

这使用了 Bootstrap 的 Responsive Embed 功能，固定纵横比为 16/9：

<div class="embed-responsive embed-responsive-16by9">
    <div id="map_canvas" class="embed-responsive-item" style="border: 1px solid black"></div>
</div>

【讨论】：

通过添加 DOM 侦听器，确保您的代码在调整窗口大小时调用库。

这仍然适用于 Bootstrap 4.0 Beta。将iframe 代码放在embed-responsive-item div 中至关重要。感谢您发布此解决方案。这应该是正确的答案，恕我直言。

【参考方案9】：

如果其他人看到这个，就有这样的问题。

我有一个带有openstreet 地图的iframe，但我无法让它响应。我终于放了一个“img-responsive”课程，一切都很好。

<iframe class="img-responsive"   frameborder="0" scrolling="no" margin margin src="YOUR OPENSTREET URL HERE" style="border: 1px solid black"></iframe>

【讨论】：

这对我不起作用。我相信最简单的答案是 @chech 发布的答案，它适用于我检查过的所有浏览器，甚至在我的手机和平板电脑上。

【参考方案10】：

Smartik 的回答效果很好。我正在使用 gmaps4rails gem 并将这些更改应用于生成的 css，如下所示：

.map_container 
padding: 6px;
border-width: 1px;
border-style: solid;
border-color: #ccc #ccc #999 #ccc;
-webkit-box-shadow: rgba(64, 64, 64, 0.5) 0 2px 5px;
-moz-box-shadow: rgba(64, 64, 64, 0.5) 0 2px 5px;
box-shadow: rgba(64, 64, 64, 0.1) 0 2px 5px;
display: block;


.gmaps4rails_map 
  display: block;
  height: 400px;

然后将这些行添加到我的视图中：

<div class="map_container">
  <div id="map" class="gmaps4rails_map">
    <div id="map_canvas" class="span9">
      <%= gmaps("map_options" =>  "type" => "ROADMAP", "center_longitude" => 180,"auto_zoom" => false, "zoom" => 16, "auto_adjust" => true, "markers" =>  "data" => @json )%>
    </div>
  </div> 
</div>

【参考方案11】：

您可以为 span6 类指定宽度和高度，然后为 map_canvas 指定宽度和高度 100%。