我正在使用谷歌地图嵌入 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 模态主体中时，它只工作一次，现在它不显示正确的 map ，而是显示整个世界地图。
我必须缩放才能查看实际方向。
下面是相同的 Bootstrap 代码。
<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>
无法弄清楚可能是什么问题？
最佳答案
代码工作正常..尝试删除浏览器中的缓存，然后重试..
<!-- 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 - 谷歌地图 iframe 无法在 bootstrap3 模式中正确加载，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/24076351/