Javascript Google Map iframe在bootstrap3模式中未正确加载
我使用谷歌地图嵌入api来显示两点之间的方向Javascript Google Map iframe在bootstrap3模式中未正确加载,javascript,jquery,google-maps,twitter-bootstrap,iframe,Javascript,Jquery,Google Maps,Twitter Bootstrap,Iframe,我使用谷歌地图嵌入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=Ahm
<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>
情态标题
接近
保存更改
无法找出问题所在?代码运行正常。。请尝试在浏览器中删除缓存,然后重试
<!-- 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 -->
我也有同样的问题
在互联网上搜索了几个小时(可能是几天)之后,我终于编写了一个自定义模式对话框,用于显示我的地图:
HTML
这个模式对话框和引导对话框的区别在于CSS只是将不透明度设置为0(完全不可见),而不是完全隐藏div。当它是目标时,它将不透明度设置为1
如果您注意到,我的close锚定标记链接到:“#calendar”。。。如果您只需链接到“#”,它会将您带回页面顶部
希望这会有所帮助。您可以在加载后将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>');
});
$('myModal').on('show.bs.modal',function(){
$('#myModal.modal body').html('';
});
在我的情况下,我需要的框架是100%的高度和宽度,这很好地工作:)它不是,甚至这个小提琴在我的系统上不工作,试图清除缓存和重新加载,也打开它它它的匿名窗口,它显示相同的世界地图。你能刷新结果吗,因为这在我的情况下也是第一次。之后它就不起作用了。
.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;
}
$('#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>');
});