Question

我正在尝试在bootstrap框架上创建一个联系我们页面，其中我将一行拆分为两列。在左侧，我有一个包含iframe的列，用于加载谷歌地图。在右侧，我有一个包含4个办事处地址的列。默认情况下，iframe默认加载总部的地图。

我希望能够点击其中一个办事处和iframe内容更改以显示相关的地图信息。

页面上的html如下： -

<section id="contact-info">
    <div class="center">                
        <h2>How to Reach Us?</h2>
        <p class="lead">Lorem ipsum dolor sit amet, consectetur adipisicing elit</p>
    </div>
    <div class="gmap-area">
        <div class="container">
            <div class="row">
                <div class="col-sm-5 text-center">
                    <div class="gmap">
                        <iframe id="gmaps" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://maps.google.com/maps?f=q&amp;source=s_q&amp;hl=en&amp;geocode=&amp;q=JoomShaper,+Dhaka,+Dhaka+Division,+Bangladesh&amp;aq=0&amp;oq=joomshaper&amp;sll=37.0625,-95.677068&amp;sspn=42.766543,80.332031&amp;ie=UTF8&amp;hq=JoomShaper,&amp;hnear=Dhaka,+Dhaka+Division,+Bangladesh&amp;ll=23.73854,90.385504&amp;spn=0.001515,0.002452&amp;t=m&amp;z=14&amp;iwloc=A&amp;cid=1073661719450182870&amp;output=embed"></iframe>
                    </div>
                </div>

                <div class="col-sm-7 map-content">
                    <ul class="row">
                        <li class="col-sm-6">
                            <address>
                                <h5 id="office_01">Head Office</h5>
                            </address>

                            <address>
                                <h5 id="office_02">Office 2</h5>
                            </address>
                        </li>


                        <li class="col-sm-6">
                            <address>
                                <h5 id="office_03">Office 3</h5>
                            </address>

                            <address>
                                <h5 id="office_04">Office 4</h5>
                            </address>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</section>  <!--/gmap_area -->


<script src="js/mapmover.js"></script>

jQuery如下： -

$(document).ready(function(){
    $("#office02").click(function(){
        $("#gmaps").attr("src","https://maps.google.com/maps?f=q&amp;source=s_q&amp;hl=en&amp;geocode=&amp;q=JoomShaper,+Dhaka,+Dhaka+Division,+Bangladesh&amp;aq=0&amp;oq=joomshaper&amp;sll=37.0625,-95.677068&amp;sspn=42.766543,80.332031&amp;ie=UTF8&amp;hq=JoomShaper,&amp;hnear=Dhaka,+Dhaka+Division,+Bangladesh&amp;ll=23.73854,90.385504&amp;spn=0.001515,0.002452&amp;t=m&amp;z=14&amp;iwloc=A&amp;cid=1073661719450182870&amp;output=embed");
    });
});

理想情况下，我想要活动地图而不是静态图像，但我得到的只是一个空白框。如果我将iframe的'src'替换为普通网页，那就可以了。我猜这与谷歌地图加载到页面的方式有关，但这超出了我的正常范围，因为我对jQuery知之甚少。

我最初尝试在jQuery中使用.html而不是.attr，但它似乎不喜欢源代码中的“ss”，这是有道理的......

任何人都有我能看到的想法或例子吗？

Answer 1

到目前为止，使用iframe嵌入谷歌地图是不可能实现你想要做的。您要找的是google maps javascript api v3。从那里，如果您尝试通过设置单击元素的单击侦听器来与地图交互，则可能正在寻找函数setCenter()。希望这有帮助!!!

使用jQuery在iframe中显示多个地图

1 个答案: