jquery - 使用 jQuery 在 iframe 中显示多个 map

Question

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

我希望能够点击其中一个办公室，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&source=s_q&hl=en&geocode=&q=JoomShaper,+Dhaka,+Dhaka+Division,+Bangladesh&aq=0&oq=joomshaper&sll=37.0625,-95.677068&sspn=42.766543,80.332031&ie=UTF8&hq=JoomShaper,&hnear=Dhaka,+Dhaka+Division,+Bangladesh&ll=23.73854,90.385504&spn=0.001515,0.002452&t=m&z=14&iwloc=A&cid=1073661719450182870&output=embed");
    });
});

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

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

有人有任何想法或示例可供我引用吗？

Answer 1

到目前为止，仅仅使用 iframe 嵌入谷歌地图是不可能实现你想要做的事情的。您正在寻找的是 google maps javascript api v3 .从那里有一个函数 setCenter()如果您尝试通过为元素设置点击监听器来与 map 进行交互，那么这可能就是您正在寻找的。希望这对您有所帮助!!!