1

我有一个奇怪的问题，我添加到地图的谷歌地图被一路缩小了，我找不到原因。

有问题的页面位于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>
4

2 回答 2

2

我发现由于 iframe 在引导模型显示方法调用之前加载而引发的缩放问题

你可以像下面这样解决它：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&amp;zoom=1" style="width:100%;height:230px; border:0" frameborder="0"></iframe>';
</script>

2）在modal-body中取一个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.
于 2014-12-23T17:41:58.793 回答
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>
于 2014-12-23T17:01:28.630 回答