Google Map iframe 未在 bootstrap 3 模式中正确加载

Posted

技术标签:

【中文标题】Google Map iframe 未在 bootstrap 3 模式中正确加载【英文标题】:Google Map iframe not loading correctly in bootstrap3 modal 【发布时间】:2014-07-27 09:36:38 【问题描述】:

我正在使用谷歌地图嵌入 api 来显示两点之间的方向。

<p><iframe width='600' height='450' frameborder='0' style='border:0' src='https://www.google.com/maps/embed/v1/directions?key=AIzaSyAb9sz-Ih7YtVpdvoT5mLqgkJBx99yR8bc&origin=Anand,+Gujarat,+India&destination=Ahmedabad,+Gujarat,+India&mode=driving'></iframe></p>

每次在 html 文件中都能正常工作。

但是当我将它放在 bootstrap3 模态体中时,它只工作了一次,现在它没有显示正确的地图,而是显示了整个世界地图。

我必须放大才能查看实际方向。

下面是相同的引导代码。

<html>
<!--<![endif]-->
<head>
<link rel="stylesheet" href="../css/bootstrap.min.css" />
<link rel="stylesheet" href="../css/bootstrap-theme.min.css" />
</head>
<body>
<!-- Button trigger modal -->
  <a data-toggle="modal" href="#myModal" class="btn btn-primary btn-lg">Launch demo modal</a>

  <!-- Modal -->
  <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">

          <a type="button" class="close" data-dismiss="modal" aria-hidden="true"><i class="fa fa-cancel"></i></a>
          <h4 class="modal-title">Modal title</h4>
        </div>
        <div class="modal-body">
          <p><iframe width='600' height='450' frameborder='0' style='border:0' src='https://www.google.com/maps/embed/v1/directions?key=AIzaSyAb9sz-Ih7YtVpdvoT5mLqgkJBx99yR8bc&origin=Anand,+Gujarat,+India&destination=Ahmedabad,+Gujarat,+India&mode=driving'></iframe></p>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
          <button type="button" class="btn btn-primary">Save changes</button>
        </div>
      </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
  </div><!-- /.modal -->
    <!-- javascript
    ================================================== -->
    <!-- These are all the javascript files -->
    <script src="../js/jquery-1.10.2.min.js"></script>
    <script src="../js/bootstrap.min.js"></script>

    <script src="../js/color-picker.js"></script>   
</body>

</html>

无法弄清楚可能是什么问题?

【问题讨论】:

【参考方案1】:

代码运行良好..尝试删除浏览器中的缓存,然后重试..

<!-- Button trigger modal -->
  <a data-toggle="modal" href="#myModal" class="btn btn-primary btn-lg">Launch demo modal</a>

  <!-- Modal -->
  <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">

          <a type="button" class="close" data-dismiss="modal" aria-hidden="true"><i class="fa fa-cancel"></i></a>
          <h4 class="modal-title">Modal title</h4>
        </div>
        <div class="modal-body">
          <p><iframe width='600' height='450' frameborder='0' style='border:0' src='https://www.google.com/maps/embed/v1/directions?key=AIzaSyAb9sz-Ih7YtVpdvoT5mLqgkJBx99yR8bc&origin=Anand,+Gujarat,+India&destination=Ahmedabad,+Gujarat,+India&mode=driving'></iframe></p>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
          <button type="button" class="btn btn-primary">Save changes</button>
        </div>
      </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
  </div><!-- /.modal -->

http://jsfiddle.net/alaskaz1864/VpTR3/

【讨论】:

它不是,即使这个小提琴在我的系统上也不起作用,试图清除缓存并重新加载,也打开它隐身窗口,它显示相同的世界地图。您能否刷新结果,因为它在我的情况下也是第一次工作。病房后它不工作。【参考方案2】:

我也遇到了同样的问题。

在互联网上搜索了几个小时(可能是几天)后,我终于为我的地图显示编写了一个自定义模式对话框:

HTML

                <div id="viewmap" class="modalDialog">
                    <div>
                        <a href="#calendar" runat="server" title="Close" class="close">X</a>
                        <h4>Map to <%: evnt.VenueName %></h4>
                        <iframe
                          
                          
                          frameborder="0" style="border:0"
                          src="https://www.google.com/maps/embed/v1/place?key=API_KEY&q=ADDRESS&zoom=15">
                        </iframe>
                    </div>
                </div>

CSS

.modalDialog,
.modalDialog > iframe
    position: fixed;
    font-family: Arial, Helvetica, sans-serif;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: rgba(0,0,0,.8);
    z-index: 99999;
    opacity: 0;
    -o-transition: opacity 400ms ease-in;
    -webkit-transition: opacity 400ms ease-in;
    -moz-transition: opacity 400ms ease-in;
    transition: opacity 400ms ease-in;
    pointer-events: none;

.modalDialog:target 
    opacity:1;
    pointer-events: all;


.modalDialog > div 
    padding-top: 10px;
    width: 700px;
    position: relative;
    margin: 2.5% auto;
    padding: 5px 20px 13px 20px;
    border-radius: 10px;
    background: #333;

此模式对话框和引导程序的区别在于 CSS 只是将不透明度设置为 0(完全不可见),而不是完全隐藏 div。当它是目标时,它将不透明度设置为 1。

如果您注意到,我的关闭锚标记链接到:“#calendar”...如果您只是链接到“#”,它将带您回到页面顶部。

希望对您有所帮助。

【讨论】:

【参考方案3】:

您可以在加载后将 iframe 注入模态框,然后通过 CSS 应用样式。

$('#myModal').on('shown.bs.modal', function () 
    $('#myModal .modal-body').html('<iframe src="https://www.google.com/maps/embed/v1/directions?key=AIzaSyAb9sz-Ih7YtVpdvoT5mLqgkJBx99yR8bc&origin=Anand,+Gujarat,+India&destination=Ahmedabad,+Gujarat,+India&mode=driving" frameborder="0" style="border:0"></iframe>');
);

在我的情况下,我需要框架为 100% 的高度和宽度,这很好用 :)

【讨论】:

以上是关于Google Map iframe 未在 bootstrap 3 模式中正确加载的主要内容,如果未能解决你的问题,请参考以下文章

更改 Google Map Iframe 的语言参数

将 Google Map iFRAME 放置在 HTML 表格行的页面中心

Google地图未在点击活动中注册

iframe 未在 WKWebview 中加载

iframe 未在 Jquery 中加载

标记未在 Android 中的地图上显示