我有一个奇怪的问题,我添加到地图的谷歌地图一直缩小,我找不到原因。
相关网页位于https://workland.ca/en/,然后您转到网站的页脚并点击联系人。下面是我使用的iframe。我试过& z = 15没有效果。
<iframe src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d2795.9215847167884!2d-73.56997780251234!3d45.51165713370363!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x4cc91a4bbe13b0df%3A0xc06c2aa42d3df87c!2s51+Rue+Sherbrooke+O%2C+Montr%C3%A9al%2C+QC+H2X+1X2!5e0!3m2!1sen!2sca!4v1419350169105&z=15"
style="width:100%;height:230px; border:0" frameborder="0"></iframe>
另一个细节 如果我以这种方式显示模态,地图就可以正常工作,
$(function () {
$('#modalContact').modal('show');
})
页面加载后,奇怪的是,我点击了
<a onclick=" $('#modalContact').modal('show')" href="#">Contact</a>
地图再次缩小
我发现在显示模态后必须加载解决方案iframe
<script>
$(
function() {
$('#modalContact').on('shown.bs.modal',
function() {
$(this)
.find("#the_map")
.html(' <iframe src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d2795.9215847167884!2d-73.56997780251234!3d45.51165713370363!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x4cc91a4bbe13b0df%3A0xc06c2aa42d3df87c!2s51+Rue+Sherbrooke+O%2C+Montr%C3%A9al%2C+QC+H2X+1X2!5e0!3m2!1sen!2sca!4v1419350169105&z=20" style="width:100%;height:230px; border:0" frameborder="0"></iframe>')
}
)
}
)
</script>
答案 0 :(得分:1)
我发现由于之前加载iframe而引发了缩放问题 bootstrap model show method call
你可以像下面这样解决: 1)在变量
中取iframe内容 <script>
var htm ='<iframe src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d2795.9215847167884!2d-73.56997780251234!3d45.51165713370363!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x4cc91a4bbe13b0df%3A0xc06c2aa42d3df87c!2s51+Rue+Sherbrooke+O%2C+Montr%C3%A9al%2C+QC+H2X+1X2!5e0!3m2!1sen!2sca!4v1419350169105&zoom=1" style="width:100%;height:230px; border:0" frameborder="0"></iframe>';
</script>
2)在模态体中取一个div,宽度和高度固定,大于ifrmae的宽度和高度,如
<div style="width:500px;height:250px;" class="container">
</div>
3)在联系点击时你必须首先显示弹出窗口,然后用iframe填充容器,如:
<a onclick=" $('#modalContact').modal('show');$('.container').html(htm);" href="#">Contact</a>
And your issue can solve.
答案 1 :(得分:0)
使用此功能:
<iframe src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d2795.9215847167884!2d-73.56997780251234!3d45.51165713370363!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x4cc91a4bbe13b0df%3A0xc06c2aa42d3df87c!2s51+Rue+Sherbrooke+O%2C+Montr%C3%A9al%2C+QC+H2X+1X2!5e0!3m2!1sen!2sca!4v1419350169105&zoom=15" style="width:100%;height:230px; border:0" frameborder="0"></iframe>