我正在尝试在 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&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"></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,这是有道理的......
有人有任何想法或示例可供我引用吗?
最佳答案
到目前为止,仅仅使用 iframe 嵌入谷歌地图是不可能实现你想要做的事情的。您正在寻找的是 google maps javascript api v3 .从那里有一个函数 setCenter()如果您尝试通过为元素设置点击监听器来与 map 进行交互,那么这可能就是您正在寻找的。希望这对您有所帮助!!!
关于jquery - 使用 jQuery 在 iframe 中显示多个 map ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30261850/